Appearance

Dashboard & Homepage ​

File Information ​

  • Path: app/pages/[brand_name]/index.vue
  • Purpose: Main dashboard/homepage displaying banners, tiles, trending assets, and recent uploads

Overview ​

The Dashboard serves as the main landing page for the Brand Portal. It provides a comprehensive view of promotional content, resource tiles, trending assets, and recently uploaded files organized by type. The page uses carousels for displaying content and supports both grid and slider view modes based on user preferences.

Architecture ​

System Components ​

  1. Banner Carousel: Promotional banners with images and descriptions
  2. Resource Tiles: Dashboard tiles in grid or slider view
  3. Trending Assets: Trending assets carousel (user preference-based)
  4. Recent Uploads: Recent uploads organized by file type (user preference-based)
  5. Dashboard Metrics: Dashboard data with caching support

Key Features ​

1. Banner Carousel ​

  • Displays promotional banners with images and descriptions
  • Auto-play functionality with pause on hover
  • Navigation links to external URLs
  • Skeleton loader during data fetch
  • Pagination dots for navigation

Configuration:

typescript
{
  itemsToShow: 1,
  autoplay: 4000,              // 4 second autoplay
  wrapAround: true,
  pauseAutoplayOnHover: true,
  snapAlign: "start"
}

2. Resource Tiles ​

  • Grid view for standard display
  • Slider/carousel view for users with is_slider preference
  • Responsive breakpoints (4 items on desktop, 3 on tablet, 2 on mobile)
  • Auto-play with pause on hover
  • Position-based sorting

Configuration:

typescript
{
  itemsToShow: 1,
  gap: 24,
  autoplay: 3000,              // 3 second autoplay
  wrapAround: true,
  pauseAutoplayOnHover: true,
  snapAlign: "start",
  breakpoints: {
    1640: { itemsToShow: 4 },  // Desktop
    960: { itemsToShow: 3 },  // Tablet
    460: { itemsToShow: 2, gap: 16 }  // Mobile
  }
}

3. Trending Assets ​

  • Displays trending assets in carousel format
  • Only shown if user setting is_trading is enabled
  • Download functionality for each asset
  • Skeleton loader during fetch
  • Responsive carousel with navigation

4. Recent Uploads ​

  • Organized by file type (images, documents, videos, audios)
  • Separate carousel for each file type
  • Browse button linking to search with file type filter
  • Only shown if user setting is_recent_upload is enabled
  • Encrypted URL state for navigation

5. Data Caching ​

  • Dashboard data cached in appData store (15-minute TTL default)
  • Banner and tile data cached separately
  • Folders cached for sidebar navigation
  • Cache can be bypassed with force: true option

File Structure ​

Core Files ​

Vue Page Files (.vue) ​

  • app/pages/[brand_name]/index.vue - Main dashboard page
    • Banner carousel display
    • Tiles grid/slider view
    • Trending assets carousel
    • Recent uploads by type
    • Share dialog integration

Route: /{brand_name}/

Composables ​

  • app/composables/core/pages/useDashboard.ts - Dashboard composable
    • Dashboard data management
    • Banner and tile data
    • Trending and recent uploads
    • Share dialog state
    • Navigation helpers

Components ​

  • app/components/dashboard/Tile.vue - Dashboard tile component

    • Tile image display
    • Tile title and description
    • Navigation link

  • app/components/dashboard/Resource.vue - Resource display component

    • Dashboard metrics display

  • app/components/card/Asset/AssetCard.vue - Asset card for trending/recent

    • Asset thumbnail
    • Asset metadata
    • Download functionality

  • app/components/dialogs/ShareAssetDialog.vue - Share dialog

    • Share link generation
    • Permission settings

Stores ​

  • app/stores/appData.ts - Application data store
    • Banner data (fetchBannerData())
    • Tile data (fetchTileData())
    • Dashboard data (fetchDashboardData())
    • Folders (fetchFolders())
    • Caching with TTL support

Data Flow ​

Initial Load ​

  1. Page mounts → onMounted hook triggers
  2. Hero content fetched first (banners + tiles) for better LCP
  3. Dashboard data fetched in background (trending + recent uploads)
  4. Folders fetched for sidebar navigation
  5. Data processed and displayed

Caching Strategy ​

typescript
// Default cache (15 minutes)
await appDataStore.fetchDashboardData()

// Force refresh
await appDataStore.fetchDashboardData({ force: true })

// Custom TTL (5 minutes)
await appDataStore.fetchDashboardData({ ttlMs: 5 * 60 * 1000 })

User Interactions ​

  1. Banner Navigation

    • Click banners to navigate to external URLs
    • Banners auto-play with pause on hover

  2. Tile Navigation

    • Click tiles to navigate to resources
    • Tiles support grid or slider view based on user preference

  3. Trending Assets

    • Download trending assets
    • Scroll through carousel
    • Navigate to asset details

  4. Recent Uploads

    • Browse by file type (images, documents, videos, audios)
    • Click "Browse" to navigate to search with filter
    • Download recent assets

  5. Share Dialog

    • Open share dialog from asset actions
    • Share with custom title and description
    • Copy share links

Performance Optimizations ​

  1. LCP Optimization: Hero content (banners + tiles) fetched first
  2. Background Fetching: Dashboard data fetched asynchronously to not block render
  3. Caching: Data cached in appData store (15-minute TTL)
  4. Skeleton Loaders: Show loading states during data fetch
  5. Client-Only Components: Share dialog wrapped in <ClientOnly> for SSR compatibility
  6. Parallel Loading: Multiple data sources loaded in parallel

API Endpoints ​

Fetch Dashboard Data ​

  • Endpoint: GET /dashboard (via appDataStore.fetchDashboardData())
  • Response: Dashboard metrics including trending data and recent uploads

Fetch Banners ​

  • Endpoint: GET /banners (via appDataStore.fetchBannerData())
  • Response: Array of banner objects with position, image, title, description, url

Fetch Tiles ​

  • Endpoint: GET /tiles (via appDataStore.fetchTileData())
  • Response: Array of tile objects with position, image, title, description, url

Fetch Folders ​

  • Endpoint: GET /folders (via appDataStore.fetchFolders())
  • Response: Array of folder objects