Appearance

Dashboard Page ​

File Information ​

  • Path: app/pages/[brand_name]/index.vue
  • Route: /{brand_name}/
  • Layout: collage-layout
  • Middleware: check-url (via global auth middleware)

Overview ​

The Dashboard page is the main home page of the application. It displays promotional banners, resource tiles, trending assets, and recently uploaded content. This page serves as the entry point for authenticated users and provides quick access to popular and recent content.

Features ​

  • Banner Carousel: Promotional banners with clickable links
  • Resource Tiles: Grid or slider view of resource tiles
  • Trending Assets: Carousel of trending assets
  • Recent Uploads: Grid view of recently uploaded assets
  • Loading States: Skeleton loaders during data fetching
  • Responsive Design: Adapts to different screen sizes

Page Structure ​

Displays promotional banners in a carousel format:

vue
<Carousel v-bind="bannerCarouselSettings">
  <Slide v-for="banner in bannerData" :key="banner.id">
    <v-img :src="banner.image" :alt="'Image of ' + banner.title" />
    <nuxt-link :href="banner.url" external target="_blank">
      <div v-if="banner.description" class="content">
        <h2>{{ banner.description }}</h2>
      </div>
    </nuxt-link>
  </Slide>
</Carousel>

Tiles Section ​

Displays resource tiles in grid or slider format based on user preference:

  • Grid View: Static grid layout
  • Slider View: Carousel with navigation (if user.is_slider is true)

Shows trending assets in a carousel:

vue
<Carousel v-bind="trendingCarouselSettings">
  <Slide v-for="file in trendingSlides" :key="file.id">
    <AssetCard
      flag="home-page"
      :file="file"
      @download="downloadFile(file)"
    />
  </Slide>
</Carousel>

Recent Uploads Section ​

Displays recently uploaded assets in a grid:

vue
<v-row no-gutters class="gap-24">
  <v-col v-for="file in recentUploads" :key="file.id" class="column-xl-4">
    <AssetCard
      flag="home-page"
      :file="file"
      @download="downloadFile(file)"
    />
  </v-col>
</v-row>

Composables Used ​

useDashboard() ​

Main composable for dashboard functionality:

typescript
const {
  bannerData,
  tileData,
  trendingSlides,
  recentUploads,
  contentLoading,
  trendingLoading,
  recentLoading,
  bannerCarouselSettings,
  tilesCarouselSettings,
  trendingCarouselSettings,
  fetchDashboard,
  handleHeroClick,
  handleTileClick,
  handleTrendingClick,
  handleRecentClick,
  downloadFile,
  openShareDialog
} = useDashboard()

Key Properties:

  • bannerData - Array of banner objects
  • tileData - Array of tile objects
  • trendingSlides - Array of trending assets
  • recentUploads - Array of recently uploaded assets
  • contentLoading - Loading state for main content
  • trendingLoading - Loading state for trending section
  • recentLoading - Loading state for recent section

Key Methods:

  • fetchDashboard() - Fetches all dashboard data
  • handleHeroClick(banner) - Handles banner click with analytics
  • handleTileClick(tile) - Handles tile click with analytics
  • handleTrendingClick(file) - Handles trending asset click
  • handleRecentClick(file) - Handles recent asset click
  • downloadFile(file) - Downloads an asset
  • openShareDialog(file) - Opens share dialog for an asset

Data Fetching ​

The dashboard fetches data from multiple sources:

  1. Banner Data: From appDataStore.bannerData
  2. Tile Data: From appDataStore.tileData
  3. Trending Assets: From appDataStore.trendingData
  4. Recent Uploads: From appDataStore.recentUploads

Data is fetched on component mount:

typescript
onMounted(async () => {
  await fetchDashboard()
})
typescript
const bannerCarouselSettings = {
  itemsToShow: 1,
  snapAlign: 'start',
  wrapAround: true,
  autoplay: 3000,
  transition: 500
}
typescript
const tilesCarouselSettings = {
  itemsToShow: 4,
  snapAlign: 'start',
  wrapAround: true
}
typescript
const trendingCarouselSettings = {
  itemsToShow: 4,
  snapAlign: 'start',
  wrapAround: true
}

User Interactions ​

When a banner is clicked:

  1. Analytics event is dispatched
  2. User is navigated to banner URL (external link)

Tile Click ​

When a tile is clicked:

  1. Analytics event is dispatched
  2. User is navigated to tile URL

Asset Click ​

When an asset is clicked:

  1. Asset details page is opened
  2. Analytics event is dispatched

Download ​

When download is triggered:

  1. Download store handles the download
  2. Loading state is shown
  3. Analytics event is dispatched

Loading States ​

The page implements skeleton loaders for each section:

  • Banner Skeleton: Image skeleton loader
  • Tiles Skeleton: Card skeleton loaders
  • Trending Skeleton: Heading + card skeleton loaders
  • Recent Skeleton: Card skeleton loaders

Analytics Integration ​

The dashboard tracks user interactions:

  • Banner clicks
  • Tile clicks
  • Trending asset clicks
  • Recent asset clicks
  • Download events