> ## Documentation Index
> Fetch the complete documentation index at: https://docs.trendteller.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Platform Frontend

> Nuxt 3 analytics dashboard and user interface

## Overview

The Platform Frontend is a modern web application built with Nuxt 3 that provides users with analytics dashboards, data visualizations, and AI-powered insights for their e-commerce operations.

## Technology Stack

<CardGroup cols={2}>
  <Card title="Nuxt 3" icon="n">
    Vue 3 meta-framework for building the application
  </Card>

  <Card title="Vuetify 3" icon="vuejs">
    Material Design component library for UI
  </Card>

  <Card title="TypeScript" icon="code">
    Type-safe development with full IDE support
  </Card>

  <Card title="Pinia" icon="database">
    State management with persistence
  </Card>
</CardGroup>

## Key Features

### Analytics Dashboard

The main dashboard provides:

* **Real-time metrics**: Sales, orders, revenue by brand
* **Trend visualization**: Interactive charts and graphs
* **Multi-brand views**: Consolidated and isolated brand analytics
* **Custom date ranges**: Flexible time period selection

### AI Insights

<Info>
  Powered by OpenAI and Google Gemini AI, the platform generates automated insights and forecasts.
</Info>

* Sales forecasting and trend predictions
* Inventory optimization recommendations
* Customer behavior analysis
* Automated daily/weekly reports

### Data Management

* Export data in multiple formats (CSV, Excel, JSON)
* Create custom reports and dashboards
* Schedule automated report delivery
* Data filtering and segmentation

## Architecture

### Page Structure

The application contains **23 pages** organized by functionality:

```
pages/
├── index.vue                 # Dashboard home
├── analytics/
│   ├── sales.vue            # Sales analytics
│   ├── products.vue         # Product performance
│   └── customers.vue        # Customer insights
├── inventory/
│   ├── stock.vue            # Inventory levels
│   └── forecast.vue         # Demand forecasting
├── brands/
│   └── [id].vue             # Brand-specific dashboards
└── settings/
    ├── profile.vue          # User settings
    └── integrations.vue     # API integrations
```

### Component Library

The application includes **29 reusable components**:

<Tabs>
  <Tab title="Data Display">
    * `DataTable` - Advanced table with sorting, filtering, pagination
    * `MetricCard` - KPI display cards
    * `ChartWidget` - Configurable chart component
    * `TrendIndicator` - Up/down trend display
  </Tab>

  <Tab title="Forms & Inputs">
    * `DateRangePicker` - Date range selection
    * `BrandSelector` - Multi-brand dropdown
    * `SearchBar` - Advanced search with filters
    * `FilterPanel` - Dynamic filter builder
  </Tab>

  <Tab title="Layout">
    * `AppBar` - Top navigation bar
    * `Sidebar` - Collapsible navigation menu
    * `PageHeader` - Page title and actions
    * `ContentCard` - Content container
  </Tab>
</Tabs>

## Authentication

### Auth0 Integration

<Steps>
  <Step title="Login Flow">
    Users authenticate via Auth0 using email/password or social providers (Google, Microsoft).
  </Step>

  <Step title="Token Management">
    JWT tokens are automatically managed by `@sidebase/nuxt-auth` with refresh token rotation.
  </Step>

  <Step title="Protected Routes">
    Middleware guards all authenticated pages and redirects to login when needed.
  </Step>

  <Step title="Role-Based Access">
    User roles determine accessible features and visible data.
  </Step>
</Steps>

## API Integration

### GraphQL with Genql

The frontend uses Genql for type-safe GraphQL queries:

```typescript theme={null}
import { useQuery } from '@/composables/useGraphQL'

// Fully typed query
const { data, loading, error } = useQuery({
  orders: {
    __args: {
      where: { brand_id: { _eq: selectedBrand } }
    },
    id: true,
    total: true,
    status: true,
    customer: {
      name: true,
      email: true
    }
  }
})
```

<Tip>
  Genql provides full TypeScript autocompletion and compile-time type checking for all GraphQL operations.
</Tip>

### Real-time Updates

The application supports GraphQL subscriptions for real-time data:

```typescript theme={null}
const { data: liveOrders } = useSubscription({
  orders: {
    __args: {
      where: { status: { _eq: 'pending' } }
    },
    id: true,
    created_at: true,
    total: true
  }
})
```

## State Management

### Pinia Stores

The application uses Pinia for centralized state management:

<AccordionGroup>
  <Accordion title="User Store">
    * Current user profile
    * Authentication state
    * User preferences
    * Selected brands
  </Accordion>

  <Accordion title="Dashboard Store">
    * Selected date ranges
    * Active filters
    * Chart configurations
    * Dashboard layouts
  </Accordion>

  <Accordion title="Cache Store">
    * API response caching
    * Optimistic updates
    * Offline data access
  </Accordion>
</AccordionGroup>

### Persistence

User preferences and filters are persisted using `pinia-plugin-persistedstate`:

* Survives page refreshes
* Syncs across browser tabs
* Encrypted localStorage for sensitive data

## Deployment

### Netlify Hosting

<Info>
  The frontend is automatically deployed to Netlify on every push to the main branch.
</Info>

**Deployment Features**:

* Automatic builds from GitHub
* Preview deployments for pull requests
* Custom domain with SSL
* Edge caching for static assets
* Serverless functions support

### Build Process

```bash theme={null}
# Install dependencies
npm install

# Generate GraphQL types
npm run genql

# Build for production
npm run build

# Preview production build
npm run preview
```

## Performance

### Optimization Strategies

<CardGroup cols={2}>
  <Card title="Code Splitting" icon="scissors">
    Nuxt automatically splits code by route for faster initial loads
  </Card>

  <Card title="Lazy Loading" icon="hourglass">
    Components and images load on-demand to reduce bundle size
  </Card>

  <Card title="API Caching" icon="server">
    Response caching reduces redundant API calls
  </Card>

  <Card title="Static Generation" icon="file">
    Public pages are pre-rendered at build time
  </Card>
</CardGroup>

## Development

### Local Development

```bash theme={null}
cd platform-front
npm install
npm run dev
```

Access the application at `http://localhost:3000`

### Environment Variables

```bash theme={null}
# .env
NUXT_PUBLIC_API_URL=https://hasura.trendteller.com/v1/graphql
NUXT_PUBLIC_AUTH_DOMAIN=trendteller.auth0.com
NUXT_AUTH_SECRET=your-secret-key
```

## Next Steps

<CardGroup cols={2}>
  <Card title="Architecture Details" icon="sitemap" href="/architecture/frontend/architecture">
    Explore the detailed frontend architecture
  </Card>

  <Card title="Component Inventory" icon="cube" href="/architecture/frontend/component-inventory">
    Browse all available UI components
  </Card>

  <Card title="Development Guide" icon="code" href="/development/frontend/guide">
    Start developing frontend features
  </Card>

  <Card title="API Integration" icon="plug" href="/development/frontend/graphql">
    Learn GraphQL integration patterns
  </Card>
</CardGroup>