Comprehensive dashboard layouts with real-time data visualization, KPI metrics, and interactive analytics components designed for modern business intelligence and operational monitoring.

The primary dashboard provides quick insights into key business metrics with a grid-based layout optimized for executive dashboards and daily operational monitoring.

Key Features:

• DataCard Components: Displays KPIs with icons, values, and trend indicators
• Recent Orders Table: Shows latest transaction data with status indicators
• Referral Sources: Visualizes traffic sources with percentage breakdowns
• Device Distribution: Displays user device analytics with donut charts
• Revenue Comparison: Monthly revenue tracking with area charts

<script setup>
import DataCard from '@/views/overview/dashboard/components/DataCard.vue'
import RecentOrders from './components/RecentOrders.vue'
import TopReferralSources from './components/TopReferralSources.vue'
import UserDeviceDistribution from './components/UserDeviceDistribution.vue'
import MonthlyRevenueComparison from './components/MonthlyRevenueComparison.vue'
import { Icon } from '@iconify/vue'
import Numeral from '@/components/Numeral/index.vue'
import { cn } from '@/lib/utils'

const cardDataList = [
  {
    name: 'Page Views',
    value: 12450,
    iconName: 'lucide:eye',
    description: 'Shows the total number of page visits within the selected timeframe',
    percentage: '0.4%',
    isMoney: false,
    precentageType: 'down',
  },
  // ... more metrics
]
</script>

<template>
  <div class="grid grid-cols-4 xl:grid-cols-8 gap-6 items-start">
    <DataCard
      class="col-span-4 sm:col-span-2"
      v-for="item in cardDataList"
      :key="item.name"
      :icon-name="item.iconName"
      :title="item.name"
    >
      <!-- Metric display with percentage change -->
    </DataCard>

    <RecentOrders class="col-span-4 xl:col-span-5" />
    <TopReferralSources class="col-span-4 sm:col-span-2 xl:col-span-3" />
    <UserDeviceDistribution class="col-span-4 sm:col-span-2 xl:col-span-3" />
    <MonthlyRevenueComparison class="col-span-4 xl:col-span-5" />
  </div>
</template>

A comprehensive analytics dashboard featuring detailed business intelligence with advanced filtering, export capabilities, and comprehensive KPI tracking.

Key Features:

• 6 KPI Metric Cards: Revenue, profit, margin, ROI, customers, and average order value
• Time Range Selection: Filter data by 7 days, 30 days, 3 months, or 1 year
• Export Functionality: Export analytics data with one-click operation
• Real-time Refresh: Manual data refresh with loading states
• Advanced Charts: Market share, sales trends, and revenue analysis

<script setup lang="ts">
import KPIMetricsCard from './components/KPIMetricsCard.vue'
import SalesLineChart from './components/SalesLineChart.vue'
import RevenueAreaChart from './components/RevenueAreaChart.vue'
import MarketShareDonutChart from './components/MarketShareDonutChart.vue'

const kpiData = computed(() => [
  {
    title: 'Total Revenue',
    value: 2847562,
    change: '+12.5%',
    changeType: 'up',
    icon: 'lucide:dollar-sign',
    description: 'Total revenue generated across all channels',
    prefix: '$',
  },
  // ... more KPI metrics
])
</script>

All dashboard charts are built using ApexCharts, providing professional data visualization with extensive customization options.

Charts automatically adapt to the current theme (light/dark mode) and include:

• Responsive Breakpoints: Automatic sizing for mobile, tablet, and desktop
• Theme Integration: Colors sync with CSS custom properties
• Animation Effects: Smooth transitions and hover interactions
• Export Options: Built-in chart export functionality

The foundational metric display component used throughout both dashboard types.

<script setup lang="ts">
import { BaseCard } from '@/components/BaseCard'
import { TooltipProvider, Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { Icon } from '@iconify/vue'

interface PropsInterface {
  iconName?: string
  title: string
}

const props = defineProps<PropsInterface>()
</script>

<template>
  <BaseCard class="p-5">
    <div class="flex items-center">
      <span class="bg-gray-100 dark:bg-gray-500/50 p-1 rounded-sm">
        <Icon :icon="props.iconName || ''" />
      </span>
      <span class="pl-2">{{ props.title }}</span>
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger class="ml-auto">
            <Icon icon="majesticons:exclamation-circle-line" />
          </TooltipTrigger>
          <TooltipContent>
            <slot name="tooltipContent"></slot>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    </div>
    <div class="text-2xl font-medium pt-4">
      <slot></slot>
    </div>
  </BaseCard>
</template>

Features:

• Icon Integration: Iconify icons with customizable names
• Tooltip Support: Use tooltipContent slot for contextual information on hover
• Flexible Content: Default slot for metric values and custom displays
• Theme Adaptive: Automatic dark/light mode styling with proper contrast

Advanced KPI metrics with comprehensive tracking capabilities:

• Value Formatting: Automatic number formatting with prefixes/suffixes
• Trend Indicators: Visual up/down indicators with percentage changes
• Color Coding: Conditional styling based on performance
• Descriptions: Detailed tooltips explaining each metric

The dashboard layout uses CSS Grid with responsive breakpoints:

.grid {
  grid-template-columns: repeat(4, 1fr);
}

@media (min-width: 1280px) {
  .grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

• Mobile First: Components stack vertically on small screens
• Tablet Optimization: 2-column layouts for medium screens
• Desktop Enhancement: Full grid layouts with sidebar navigation
• Chart Responsiveness: Charts automatically resize with container

The dashboard system supports real-time data updates through:

• Reactive Data: Vue’s reactivity system for automatic UI updates
• Loading States: Professional loading indicators during data fetch
• Error Handling: Graceful error states with retry mechanisms
• Caching Strategy: Efficient data caching for performance

Both dashboards include comprehensive mock data systems:

• Dynamic Generation: Realistic data generation with randomization
• Time-based Logic: Current date awareness for realistic analytics
• Scalable Structure: Easy integration with real API endpoints
• Type Safety: Full TypeScript support for data structures

• Lazy Loading: Charts load only when visible
• Data Sampling: Large datasets automatically sampled for performance
• Animation Control: Configurable animation settings
• Memory Management: Proper cleanup of chart instances

• Virtual Scrolling: For large data tables
• Computed Properties: Efficient data transformation
• Component Splitting: Code splitting for faster initial loads
• Bundle Optimization: Tree shaking for unused chart types

Dashboard components fully support theme customization:

• CSS Custom Properties: Easy color scheme modifications
• Component Variants: Multiple styling options per component
• Brand Integration: Logo and color integration points
• Layout Flexibility: Configurable grid layouts and component positioning

Replace mock data with real API integration:

1. API Service Layer: Centralized data fetching
2. State Management: Pinia stores for global state
3. Cache Management: Intelligent caching strategies
4. Error Boundaries: Comprehensive error handling

The dashboard system provides a solid foundation for building professional admin interfaces with comprehensive analytics capabilities, real-time updates, and responsive design patterns.