@veristone/nuxt-v-app 0.1.0

package/app/data/TasksData.ts

@@ -0,0 +1,101 @@
+// Tasks data for dashboard components
+
+export interface Task {
+  project: string
+  title: string
+  files: number
+  comments: number
+  deadline: Date
+  priority: 'Urgent' | 'Normal' | 'Low'
+}
+
+export interface TaskColumn {
+  id: string
+  title: string
+  tasks: Task[]
+}
+
+export const TasksData: TaskColumn[] = [
+  {
+    id: '1',
+    title: 'Backlog',
+    tasks: [
+      {
+        project: 'website',
+        title: 'Implement user authentication',
+        files: 2,
+        comments: 5,
+        deadline: new Date('2025-05-13'),
+        priority: 'Urgent' as const
+      },
+      {
+        project: 'mobile-app',
+        title: 'Design onboarding flow',
+        files: 3,
+        comments: 8,
+        deadline: new Date('2026-01-01'),
+        priority: 'Normal' as const
+      },
+      {
+        project: 'api',
+        title: 'Write documentation for endpoints',
+        files: 1,
+        comments: 3,
+        deadline: new Date('2026-01-01'),
+        priority: 'Low' as const
+      }
+    ]
+  },
+  {
+    id: '2',
+    title: 'In Progress',
+    tasks: [
+      {
+        project: 'dashboard',
+        title: 'Integrate payment gateway',
+        files: 5,
+        comments: 12,
+        deadline: new Date('2026-01-01'),
+        priority: 'Urgent' as const
+      },
+      {
+        project: 'e-commerce',
+        title: 'Optimize product search',
+        files: 2,
+        comments: 7,
+        deadline: new Date('2026-01-01'),
+        priority: 'Normal' as const
+      }
+    ]
+  },
+  {
+    id: '3',
+    title: 'In Review',
+    tasks: [
+      {
+        project: 'marketing',
+        title: 'Finalize social media campaign',
+        files: 3,
+        comments: 9,
+        deadline: new Date('2026-01-01'),
+        priority: 'Normal' as const
+      },
+      {
+        project: 'website',
+        title: 'Test contact form',
+        files: 1,
+        comments: 4,
+        deadline: new Date('2026-01-01'),
+        priority: 'Urgent' as const
+      },
+      {
+        project: 'mobile-app',
+        title: 'Review push notification implementation',
+        files: 2,
+        comments: 6,
+        deadline: new Date('2026-01-01'),
+        priority: 'Normal' as const
+      }
+    ]
+  }
+]

package/app/data/dashboardData.ts

@@ -0,0 +1,113 @@
+// Dashboard data for playground components
+
+export const RevenueData = [
+  { month: 'July 2023', total: 180 },
+  { month: 'August 2023', total: 195 },
+  { month: 'September 2023', total: 210 },
+  { month: 'October 2023', total: 225 },
+  { month: 'November 2023', total: 240 },
+  { month: 'December 2023', total: 260 },
+  { month: 'January 2024', total: 205 },
+  { month: 'February 2024', total: 220 },
+  { month: 'March 2024', total: 235 },
+  { month: 'April 2024', total: 250 },
+  { month: 'May 2024', total: 265 },
+  { month: 'June 2024', total: 280 }
+]
+
+export const RevenueCategoriesMultiple = {
+  total: { name: 'Total', color: '#3b82f6' }
+}
+
+export const xFormatter = (i: number): string => `${RevenueData[i]?.month}`
+export const yFormatter = (i: number) => `${i}`
+
+export interface Order {
+  id: number
+  customer: string
+  date: string
+  total: number
+  status: string
+}
+
+export const orders: Order[] = [
+  { id: 1001, customer: 'Alice Johnson', date: '2025-06-18', total: 120.50, status: 'Paid' },
+  { id: 1002, customer: 'Bob Smith', date: '2025-06-17', total: 89.99, status: 'Pending' },
+  { id: 1003, customer: 'Charlie Brown', date: '2025-06-16', total: 45.00, status: 'Paid' },
+  { id: 1004, customer: 'Diana Ross', date: '2025-06-15', total: 210.00, status: 'Failed' },
+  { id: 1005, customer: 'Eve Wilson', date: '2025-06-14', total: 67.25, status: 'Paid' }
+]
+
+export const DonutData = [
+  { color: '#3b82f6', name: 'Laptops', value: 38 },
+  { color: '#a855f7', name: 'Smartphones', value: 27 },
+  { color: '#22c55e', name: 'PC Components', value: 18 },
+  { color: '#f59e42', name: 'Monitors', value: 9 }
+]
+
+export const products = [
+  { id: 1, name: 'MacBook Pro 16"', category: 'Laptops', stock: 8, image: '/images/products/laptop.png' },
+  { id: 2, name: 'iPhone 15 Pro', category: 'Smartphones', stock: 0, image: '/images/products/phone.webp' },
+  { id: 3, name: 'Dell UltraSharp 27', category: 'Monitors', stock: 15, image: '/images/products/monitor.webp' },
+  { id: 4, name: 'Logitech MX Master 3S', category: 'Accessories', stock: 4, image: '/images/products/mouse.webp' }
+]
+
+export const ReturnsData = {
+  chartData: [
+    { date: 'Jan 23', returns: 45 },
+    { date: 'Feb 23', returns: 38 },
+    { date: 'Mar 23', returns: 52 },
+    { date: 'Apr 23', returns: 41 },
+    { date: 'May 23', returns: 36 },
+    { date: 'Jun 23', returns: 29 },
+    { date: 'Jul 23', returns: 33 },
+    { date: 'Aug 23', returns: 27 },
+    { date: 'Sep 23', returns: 31 },
+    { date: 'Oct 23', returns: 25 },
+    { date: 'Nov 23', returns: 22 },
+    { date: 'Dec 23', returns: 19 }
+  ],
+  categories: {
+    returns: { name: 'Returns', color: '#a1a1aa' }
+  }
+}
+
+export const RevenueDataCard = {
+  chartData: [
+    { date: 'Jan 23', subscriptions: 2890, downloads: 2338 },
+    { date: 'Feb 23', subscriptions: 2756, downloads: 2103 },
+    { date: 'Mar 23', subscriptions: 3322, downloads: 2194 },
+    { date: 'Apr 23', subscriptions: 3470, downloads: 2108 },
+    { date: 'May 23', subscriptions: 3475, downloads: 1812 },
+    { date: 'Jun 23', subscriptions: 3129, downloads: 1726 },
+    { date: 'Jul 23', subscriptions: 3490, downloads: 1982 },
+    { date: 'Aug 23', subscriptions: 2903, downloads: 2012 },
+    { date: 'Sep 23', subscriptions: 2643, downloads: 2342 },
+    { date: 'Oct 23', subscriptions: 2837, downloads: 2473 },
+    { date: 'Nov 23', subscriptions: 2954, downloads: 3848 },
+    { date: 'Dec 23', subscriptions: 3239, downloads: 3736 }
+  ],
+  categories: {
+    subscriptions: { name: 'Subscriptions', color: '#3b82f6' }
+  }
+}
+
+export const SalesData = {
+  chartData: [
+    { date: 'Jan 23', sales: 1245 },
+    { date: 'Feb 23', sales: 1390 },
+    { date: 'Mar 23', sales: 1512 },
+    { date: 'Apr 23', sales: 1620 },
+    { date: 'May 23', sales: 1750 },
+    { date: 'Jun 23', sales: 1688 },
+    { date: 'Jul 23', sales: 1823 },
+    { date: 'Aug 23', sales: 1940 },
+    { date: 'Sep 23', sales: 2012 },
+    { date: 'Oct 23', sales: 2105 },
+    { date: 'Nov 23', sales: 2250 },
+    { date: 'Dec 23', sales: 2398 }
+  ],
+  categories: {
+    sales: { name: 'Sales', color: '#3b82f6' }
+  }
+}

package/app/layouts/default.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+const route = useRoute()
+
+const links = ref<NavigationMenuItem[][]>([
+  [
+    {
+      to: '/',
+      icon: 'i-lucide-home',
+      label: 'Overview'
+    },
+    {
+      to: '/playground',
+      icon: 'i-lucide-blocks',
+      label: 'Playground',
+      open: true,
+      children: [
+        {
+          to: '/playground',
+          icon: 'i-lucide-layout-grid',
+          label: 'Components'
+        },
+        {
+          to: '/playground/cards',
+          icon: 'i-lucide-credit-card',
+          label: 'Cards'
+        },
+        {
+          to: '/playground/charts',
+          icon: 'i-lucide-bar-chart-3',
+          label: 'Charts'
+        },
+        {
+          to: '/playground/blocks',
+          icon: 'i-lucide-layout-template',
+          label: 'Blocks'
+        },
+        {
+          to: '/playground/dashboard',
+          icon: 'i-lucide-layout-dashboard',
+          label: 'Dashboard'
+        },
+        {
+          to: '/playground/tables',
+          icon: 'i-lucide-table-2',
+          label: 'Tables'
+        },
+        {
+          to: '/playground/base',
+          icon: 'i-lucide-box',
+          label: 'Base Components'
+        },
+        {
+          to: '/playground/buttons',
+          icon: 'i-lucide-mouse-pointer-click',
+          label: 'Buttons'
+        },
+        {
+          to: '/playground/formatters',
+          icon: 'i-lucide-text-cursor-input',
+          label: 'Formatters'
+        },
+        {
+          to: '/playground/states',
+          icon: 'i-lucide-loader',
+          label: 'States'
+        },
+        {
+          to: '/playground/modals',
+          icon: 'i-lucide-panel-right',
+          label: 'Modals'
+        }
+      ]
+    }
+  ]
+])
+
+const groups = computed(() => [
+  {
+    id: 'links',
+    label: 'Go to',
+    items: links.value.flat()
+  },
+  {
+    id: 'code',
+    label: 'Code',
+    items: [
+      {
+        id: 'source',
+        label: 'View page source',
+        icon: 'i-simple-icons-github',
+        to: `https://github.com/nuxt-ui-templates/dashboard/blob/main/app/pages${
+          route.path === '/' ? '/index' : route.path
+        }.vue`,
+        target: '_blank'
+      }
+    ]
+  }
+])
+</script>
+
+<template>
+  <UDashboardGroup unit="rem">
+    <UDashboardSidebar
+      resizable
+      collapsible
+      :min-size="14"
+      :default-size="16"
+      :max-size="18"
+    >
+      <template #header="{ collapsed }">
+        <div
+          class="flex items-center gap-2 px-3 py-2"
+          :class="collapsed ? 'justify-center' : ''"
+        >
+          <div class="size-8 rounded-lg bg-primary-500/10 flex items-center justify-center shrink-0">
+            <UIcon name="i-lucide-layout-dashboard" class="size-5 text-primary-500" />
+          </div>
+          <span v-if="!collapsed" class="font-semibold text-lg truncate">VA Playground</span>
+        </div>
+      </template>
+
+      <template #default="{ collapsed }">
+        <VaLayoutSideNav
+          :items="links[0]!"
+          :collapsed="collapsed"
+        />
+
+        <!-- Accounts section commented out - requires /analytics.svg asset
+        <div class="space-y-1 mt-4">
+          <div
+            v-if="!collapsed"
+            class="mb-2 text-xs font-bold tracking-wide text-dimmed uppercase"
+          >
+            Accounts
+          </div>
+          <div>
+            <div
+              class="flex items-center gap-2"
+              :class="collapsed ? 'p-0 justify-center' : 'px-3 py-2'"
+            >
+              <img
+                class="w-4"
+                src="/analytics.svg"
+                alt=""
+              >
+              <div
+                v-if="!collapsed"
+                class="text-muted font-medium"
+              >
+                Google Analytics
+              </div>
+            </div>
+          </div>
+        </div>
+        -->
+
+      </template>
+
+      <template #footer="{ collapsed }">
+        <VaLayoutUserMenu :collapsed="collapsed" />
+      </template>
+    </UDashboardSidebar>
+
+    <UDashboardSearch :groups="groups" />
+
+    <slot />
+    <VaLayoutNotificationsSlideover />
+  </UDashboardGroup>
+</template>

package/app/layouts/legacy.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+// Convert navigation to new format
+const links: NavigationMenuItem[][] = [
+  [
+    { label: 'Home', icon: 'i-lucide-home', to: '/' },
+    { label: 'Loans', icon: 'i-lucide-landmark', to: '/loans' },
+    { label: 'Tapes', icon: 'i-lucide-layers', to: '/tapes' },
+    { label: 'Contacts', icon: 'i-lucide-users', to: '/contacts' },
+    { label: 'Companies', icon: 'i-lucide-building-2', to: '/companies' },
+    { label: 'Deals', icon: 'i-lucide-handshake', to: '/deals', badge: 8 },
+    { label: 'Tasks', icon: 'i-lucide-check-square', to: '/tasks', badge: 12 }
+  ],
+  [
+    { label: 'Settings', icon: 'i-lucide-settings', to: '/settings' },
+    { label: 'Help', icon: 'i-lucide-circle-help', to: '/help' }
+  ]
+]
+</script>
+
+<template>
+  <UDashboardGroup unit="rem">
+    <UDashboardSidebar
+      resizable
+      collapsible
+      :min-size="14"
+      :default-size="16"
+      :max-size="18"
+    >
+      <template #header="{ collapsed }">
+        <VaLayoutTeamsMenu :collapsed="collapsed" />
+      </template>
+
+      <template #default="{ collapsed }">
+        <VaLayoutSideNav
+          :items="links[0]!"
+          :collapsed="collapsed"
+        />
+
+        <div class="mt-auto">
+          <UNavigationMenu
+            :collapsed="collapsed"
+            :items="links[1]"
+            orientation="vertical"
+            tooltip
+          />
+        </div>
+      </template>
+
+      <template #footer="{ collapsed }">
+        <VaLayoutUserMenu :collapsed="collapsed" />
+      </template>
+    </UDashboardSidebar>
+
+    <slot name="header" />
+    <slot name="header-actions" />
+    <slot />
+    <VaLayoutNotificationsSlideover />
+  </UDashboardGroup>
+</template>