Appearance

Pages Documentation ​

Overview ​

This section documents all pages in both the Admin Frontend and Brand Portal Frontend applications. Pages in Nuxt.js are automatically routed based on their file structure in the pages/ directory.

Applications ​

Admin Frontend Pages ​

Page Structure ​

Authentication Pages ​

Login Page ​

  • Path: pages/index.vue
  • Route: /
  • Purpose: User authentication and login functionality
  • Features: Email/password login, Google OAuth, support platform login

Forgot Password ​

  • Path: pages/forgot-password.vue
  • Route: /forgot-password
  • Purpose: Password recovery functionality

Reset Password ​

  • Path: pages/reset-password.vue
  • Route: /reset-password
  • Purpose: Password reset after receiving reset link

Social Login ​

  • Path: pages/social-login.vue
  • Route: /social-login
  • Purpose: Handle social authentication callbacks

DAM Module Pages ​

Dashboard ​

  • Path: pages/_workspace_id/dam/dashboard/index.vue
  • Route: /:workspace_id/dam/dashboard
  • Purpose: Main DAM dashboard with recent assets, collages, and folders

Folders ​

  • Path: pages/_workspace_id/dam/folders/index.vue
  • Route: /:workspace_id/dam/folders
  • Purpose: Root folders listing and management

Folder Details ​

  • Path: pages/_workspace_id/dam/folders/_id/index.vue
  • Route: /:workspace_id/dam/folders/:id
  • Purpose: Folder contents and subfolder management

Assets ​

  • Path: pages/_workspace_id/dam/files/_id.vue
  • Route: /:workspace_id/dam/files/:id
  • Purpose: Individual asset details and management
  • Path: pages/_workspace_id/dam/search.vue
  • Route: /:workspace_id/dam/search
  • Purpose: Global search across assets, folders, and collages

Sharing ​

  • Path: pages/_workspace_id/dam/sharing/index.vue
  • Route: /:workspace_id/dam/sharing
  • Purpose: Manage shared assets and links

Upload ​

  • Path: pages/_workspace_id/dam/upload.vue
  • Route: /:workspace_id/dam/upload
  • Purpose: Asset upload interface

Uploaded ​

  • Path: pages/_workspace_id/dam/uploaded.vue
  • Route: /:workspace_id/dam/uploaded
  • Purpose: View uploaded assets and upload status

Trash ​

  • Path: pages/_workspace_id/dam/trash.vue
  • Route: /:workspace_id/dam/trash
  • Purpose: Deleted assets and recovery

Collages ​

  • Path: pages/_workspace_id/dam/collage/index.vue
  • Route: /:workspace_id/dam/collage
  • Purpose: Collages listing

Collage Details ​

  • Path: pages/_workspace_id/dam/collage/_id/index.vue
  • Route: /:workspace_id/dam/collage/:id
  • Purpose: Individual collage management

Workspace Settings Pages ​

Workspace Settings ​

  • Path: pages/_workspace_id/workspace-settings/index.vue
  • Route: /:workspace_id/workspace-settings
  • Purpose: Main workspace settings page

Account & Billing ​

  • Path: pages/_workspace_id/workspace-settings/account-billing.vue
  • Route: /:workspace_id/workspace-settings/account-billing
  • Purpose: Subscription and billing management

Custom Fields ​

  • Path: pages/_workspace_id/workspace-settings/custom-fields/index.vue
  • Route: /:workspace_id/workspace-settings/custom-fields
  • Purpose: Manage custom fields for assets

DAM Settings ​

  • Path: pages/_workspace_id/workspace-settings/dam/index.vue
  • Route: /:workspace_id/workspace-settings/dam
  • Purpose: DAM instance management

DAM Instance Settings ​

  • Path: pages/_workspace_id/workspace-settings/dam/_instance_id/index.vue
  • Route: /:workspace_id/workspace-settings/dam/:instance_id
  • Purpose: Individual DAM instance configuration

User Management ​

  • Path: pages/_workspace_id/workspace-settings/user/list.vue
  • Route: /:workspace_id/workspace-settings/user/list
  • Purpose: Workspace user management

External Users ​

  • Path: pages/_workspace_id/workspace-settings/external-user/list.vue
  • Route: /:workspace_id/workspace-settings/external-user/list
  • Purpose: External user management

External Pages ​

External Upload ​

  • Path: pages/_workspace_id/external/upload.vue
  • Route: /:workspace_id/external/upload
  • Purpose: External user asset upload

External Verify ​

  • Path: pages/_workspace_id/external/verify.vue
  • Route: /:workspace_id/external/verify
  • Purpose: External user verification

Request Access ​

  • Path: pages/_workspace_id/external/request-access.vue
  • Route: /:workspace_id/external/request-access
  • Purpose: Request external access

Other Pages ​

Profile ​

  • Path: pages/profile.vue
  • Route: /profile
  • Purpose: User profile management

Create Workspace ​

  • Path: pages/create-workspace.vue
  • Route: /create-workspace
  • Purpose: Create new workspace

Shared Assets ​

  • Path: pages/shared-assets/_type.vue
  • Route: /shared-assets/:type
  • Purpose: View shared assets by type

Dynamic Routes ​

The Admin Frontend uses Nuxt.js dynamic routing with parameters:

  • _workspace_id - Workspace identifier
  • _id - Resource identifier (folder, collage, asset)
  • _type - Asset type or category
  • _brand_name - Brand name for shared assets
  • _user_id - User identifier

Middleware ​

Admin Frontend pages use middleware for:

  • Authentication checks (authCheck, onlyAuth, guestCheck)
  • Permission validation (can-access-dam-module, can-access-dam-settings)
  • Workspace validation (checkWorkspace, check-dam-instance)
  • Module access control (can-access-child-workspace)

Admin Frontend pages are organized hierarchically:

  1. Root level pages (login, profile)
  2. Workspace-scoped pages (_workspace_id)
  3. Module-specific pages (dam, workspace-settings)
  4. Resource-specific pages (folders, collages, assets)

Brand Portal Frontend Pages ​

Overview ​

The Brand Portal Frontend is a Nuxt 4 application that provides a modern, secure brand portal. All main application routes are prefixed with a brand name parameter [brand_name].

Route Structure ​

Brand-Specific Routes ([brand_name]/) ​

All main application routes are prefixed with a brand name parameter:

  • /{brand_name}/ - Dashboard/home page
  • /{brand_name}/login - Login page
  • /{brand_name}/forgot-password - Password recovery
  • /{brand_name}/reset-password - Password reset
  • /{brand_name}/generate-password - Password generation
  • /{brand_name}/profile - User profile
  • /{brand_name}/search - Search page
  • /{brand_name}/sharing - Sharing management
  • /{brand_name}/support - Support page

Collage Routes ​

  • /{brand_name}/collage - Collage list page
  • /{brand_name}/collage/[id] - Collage details page

Folder Routes ​

  • /{brand_name}/folders - Folder list page
  • /{brand_name}/folders/[id] - Folder details page

File Routes ​

  • /{brand_name}/files/[id] - File/asset details page

Token-Based Routes ​

  • /{brand_name}/[token] - One-time token access route

Shared Assets Routes ​

  • /shared-assets/[type] - Public shared asset pages

Key Pages ​

Dashboard ​

Path: app/pages/[brand_name]/index.vue
Route: /{brand_name}/

The main dashboard/home page that displays:

  • Banner carousel with promotional banners
  • Resource tiles (grid or slider view based on user preference)
  • Dashboard metrics
  • Trending assets carousel
  • Recent uploads organized by file type

Features:

  • Uses appData store for data fetching
  • Implements caching (15-minute TTL)
  • Parallel data loading for performance
  • Responsive grid layout
  • User preference-based views (slider vs grid)

Login Page ​

Path: app/pages/[brand_name]/login.vue
Route: /{brand_name}/login

Authentication page with:

  • Email/password login
  • HTTP-only cookie authentication
  • Automatic redirect if already logged in
  • Workspace selection support

Search Page ​

Path: app/pages/[brand_name]/search.vue
Route: /{brand_name}/search

Advanced search interface with:

  • Full-text search with Typesense integration
  • Advanced filters (tags, file types, dates)
  • Search result display with pagination
  • Real-time search results
  • Filter persistence
  • Bulk actions on results

Folder Pages ​

Path: app/pages/[brand_name]/folders/[id]/index.vue
Route: /{brand_name}/folders/:id

Folder navigation and management:

  • Folder contents display
  • Hierarchical navigation with breadcrumbs
  • Subfolder navigation
  • Asset listing
  • View mode toggle (grid/list)
  • Bulk operations

Collage Pages ​

Path: app/pages/[brand_name]/collage/[id]/index.vue
Route: /{brand_name}/collage/:id

Collage viewer and editor:

  • Collage display
  • Asset management within collage
  • Collage sharing
  • Interactive collage viewer
  • Asset addition/removal

Sharing Page ​

Path: app/pages/[brand_name]/sharing.vue
Route: /{brand_name}/sharing

Share link management:

  • List of all share links
  • Create new share links
  • Manage existing shares (edit, delete, copy)
  • Share link expiration management
  • Filtering and sorting
  • Bulk actions

Profile Page ​

Path: app/pages/[brand_name]/profile.vue
Route: /{brand_name}/profile

User profile management:

  • Profile information display
  • Profile editing
  • Account settings

Dynamic Routes ​

The Brand Portal Frontend uses Nuxt.js dynamic routing with parameters:

  • [brand_name] - Brand identifier (required for most routes)
  • [id] - Resource identifier (folder, collage, asset)
  • [token] - One-time access token
  • [type] - Asset type or category

Middleware ​

Brand Portal Frontend pages use middleware for:

  • Global authentication middleware
  • URL validation middleware (check-url)
  • Redirect middleware (redirect-if-logged-in)
  • Permission validation

Page Patterns ​

Data Fetching Pattern ​

Most pages follow this pattern:

vue
<script setup lang="ts">
const route = useRoute()
const appDataStore = useAppDataStore()

// Fetch data on mount
onMounted(async () => {
  await appDataStore.fetchDashboardData()
})
</script>

Loading States ​

Pages use skeleton loaders during data fetching for better UX.

Error Handling ​

Pages implement error boundaries with proper user feedback using snackbar notifications.

Best Practices ​

  1. Use Composables: Extract page logic into composables for reusability
  2. Loading States: Always show loading states during data fetching
  3. Error Handling: Implement proper error handling and user feedback
  4. Type Safety: Use TypeScript types from ~/types
  5. Caching: Leverage store caching for frequently accessed data
  6. SSR Compatibility: Ensure components work with SSR

For detailed documentation on Brand Portal Frontend pages, see the Brand Portal Frontend Pages Documentation.