Frontend Dashboard¶

A professional dark-themed trading dashboard built with Vue 3 and Tailwind CSS. The frontend is a single-page application that serves as the primary interface for manual trading, account management, webhook configuration, and strategy building. It is designed to scale from 375px mobile screens to 8K displays using fluid responsive design — no hard breakpoint jumps, everything scales smoothly with clamp().

Technology Stack¶

Layer	Technology	Version	Purpose
Framework	Vue 3 (Composition API, `<script setup>`)	3.4	Reactive UI components
Build Tool	Vite	5.0	Fast dev server, optimized production builds
CSS Framework	Tailwind CSS	3.4	Utility-first styling, custom design tokens
Icons	Font Awesome	6.5	UI iconography
Charts	TradingView Widget API	—	Live market charts in trading view
Flow Diagrams	@vue-flow/core	—	Visual strategy builder canvas
Fonts	Inter (sans), JetBrains Mono (mono)	—	Typography system
State	Provide/Inject (no Vuex/Pinia)	—	Lightweight global state
Routing	Tab-based (`v-if` / `v-show`, no Vue Router)	—	Simple navigation without URL routing

flowchart TB
    subgraph Build["Build Pipeline"]
        VITE["Vite Dev Server<br/>HMR + Proxy to FastAPI"]
        BUILD["vite build<br/>→ dist/ (static assets)"]
    end

    subgraph App["Vue 3 SPA"]
        ROOT["App.vue<br/>Root + Tab Navigation"]
        VIEWS["10 Tab Views<br/>Trading, Accounts, Orders, ..."]
        COMP["Component Library<br/>strategy-builder/, common/, layout/"]
        API_MOD["API Module<br/>fetch + CSRF + encryption"]
    end

    subgraph Backend["FastAPI Backend"]
        STATIC["Static File Mount<br/>Serves dist/ at /"]
        REST["REST API<br/>/api/*, /auth/*, /trading/*"]
    end

    VITE -->|Dev| REST
    BUILD --> STATIC
    ROOT --> VIEWS
    VIEWS --> COMP
    VIEWS --> API_MOD
    API_MOD -->|"fetch() + HttpOnly cookies"| REST

Dashboard Views¶

The application uses tab-based navigation managed in App.vue. Each tab renders a dedicated view component:

User-Facing Views¶

View	Component	Description
Trading	`TradingTab.vue`	Manual order placement with symbol selection, TradingView chart widget, and quick-order toolbar
Accounts	`AccountsTab.vue`	Position management — live P&L display, position cards with unrealized gains/losses
Orders	`OrdersTab.vue`	Order history with status tracking — filterable by date, symbol, status (filled/pending/cancelled)
Symbols	`SymbolsTab.vue`	Symbol browser with search, filtering by category, and real-time availability status
Strategy Builder	`StrategyBuilderTab.vue`	Visual strategy editor — full-page canvas for the strategy builder
Webhook	`WebhookTab.vue`	TradingView webhook configuration — token management, allowed symbols, IP whitelist, test buttons
Audit	`AuditTab.vue`	Security audit log viewer — login history, API key usage, credential changes
Account	`AccountTab.vue`	User profile and subscription management — plan details, usage stats, billing
Whitelist	`WhitelistTab.vue`	IP whitelist configuration — manage allowed IPs for webhook and API access

Admin Views¶

View	Component	Description
Admin Panel	`AdminTab.vue`	Admin dashboard — entry point for platform administration
Broker List	`AdminBrokerList`	Broker configuration management — view/edit broker settings
User List	`AdminUserList`	User administration — search, filter, view all registered users
User Modal	`AdminUserModal`	User detail editor — modify user settings, subscription, credentials
Platform Stats	`AdminStats`	Platform statistics dashboard — active users, order volume, worker status
Contact List	`AdminContactList`	Contact/support ticket management
Confirm Dialog	`AdminConfirmDialog`	Reusable confirmation dialog for destructive admin actions

Component Architecture¶

flowchart LR
    App["App.vue"] --> Views["10 Tab Views"]
    App --> Layout["Layout Components"]
    Views --> Common["Shared UI"]
    Views --> Modals["Dialogs"]
    Views --> SB["Strategy Builder<br/>11 components"]

Global state is managed via Vue 3 provide/inject — the root App.vue provides user, api, showToast, and logout to all child views.

Component Groups¶

Group	Directory	Components	Purpose
Strategy Builder	`components/strategy-builder/`	11	Visual flow editor, condition builders, PineScript preview
Common	`components/common/`	Shared	Buttons, inputs, cards, loading spinners, empty states
Layout	`components/layout/`	Header, navigation	Page chrome, responsive header, tab bar / bottom nav
Modals	`components/modals/`	Various	Confirmation dialogs, detail views, form modals

State Management¶

No Vuex or Pinia — global state is managed through Vue's provide/inject:

// App.vue — provides global state to all descendants
provide('user', user);
provide('showToast', showToast);
provide('api', api);
provide('logout', logout);

// Any child component — injects what it needs
const user = inject('user');
const api = inject('api');

API Communication¶

All API calls go through a centralized api() function that handles authentication, CSRF protection, and error routing:

export async function api(endpoint, options = {}) {
  const csrfToken = sessionStorage.getItem('csrf_token');

  const res = await fetch(endpoint, {
    ...options,
    credentials: 'include',              // Send HttpOnly JWT cookie
    headers: {
      ...options.headers,
      'X-CSRF-Token': csrfToken,         // Auto-inject CSRF
    },
  });

  if (res.status === 401) { logout(); }  // Session expired
  if (res.status === 403) { /* forbidden */ }
  if (res.status === 451) { /* ToS required */ }

  return res;
}

Credential Encryption

When users submit broker credentials (API keys, secrets, CA certificates), the frontend encrypts them using the Web Crypto API before sending. It generates a random AES-256-GCM key, encrypts the data, then wraps the AES key with the server's RSA-4096 public key. The server decrypts with KMS. Credentials never travel in plaintext — not even over TLS.

Public Pages¶

Static HTML pages served outside the SPA for marketing and unauthenticated access:

Page	File	Purpose
Landing Page	`landing.html`	Product overview, feature highlights, pricing
FAQ	`faq.html`	Frequently asked questions
Security	`security.html`	Security practices, encryption details, compliance
Strategy Builder	`strategy-builder.html`	Marketing page for the visual strategy builder feature
Password Reset	(route)	Reset flow with email verification

Design System¶

Dark Theme¶

Dark theme is the default — an industry standard for trading platforms that reduces eye strain during extended market-watching sessions and provides optimal contrast for price action visualization.

Token	Usage	Value
`dark-950`	Page background	Darkest
`dark-900`	Section background	—
`dark-800`	Card background	—
`dark-700`	Borders, dividers	—
`dark-300`	Body text	—
`dark-100`	Headings, emphasis	Lightest
`accent` (blue)	Primary actions, links	`#3b82f6`
`green`	Profit, buy, success	—
`red`	Loss, sell, error	—
`yellow`	Warning states	—
`cyan`	Informational	—

Typography¶

Font	Usage
Inter	Headings, body text, UI labels
JetBrains Mono	Code, numbers, prices, PineScript preview

Fluid sizes using clamp() — text scales smoothly with viewport width:

Token	Min	Preferred	Max
`fluid-xs`	10px	0.7vw	12px
`fluid-sm`	11px	0.8vw	13px
`fluid-base`	13px	0.9vw	15px
`fluid-lg`	15px	1.1vw	18px
`fluid-xl`	18px	1.3vw	22px

Responsive Breakpoints¶

The Tailwind config defines breakpoints from small phones to 8K displays:

screens: {
  xs:    '375px',   // Small phones
  sm:    '640px',   // Large phones / small tablets
  md:    '768px',   // Tablets (mobile ↔ desktop switch)
  lg:    '1024px',  // Small laptops
  xl:    '1280px',  // Desktops
  '2xl': '1536px',  // Large desktops
  '3xl': '1920px',  // Full HD
  '4xl': '2560px',  // QHD
  '5xl': '3840px',  // 4K UHD
  '6xl': '5120px',  // 5K
  '7xl': '7680px',  // 8K
}

Desktop vs. Mobile Layout¶

Element	Desktop (≥768px)	Mobile (<768px)
Navigation	Top tab bar	Bottom navigation bar
Trading toolbar	Full width, single row	2-row compact grid
Modals	Centered overlay	Bottom sheet (drag-to-dismiss)
Tables	Full columns with sorting	Card view (stacked fields)
Account cards	Grid layout	Horizontal scroll
Touch targets	Standard	Minimum 44px (Apple HIG)

flowchart TB
    subgraph Desktop["Desktop Layout (≥768px)"]
        D_HEAD["Header (fixed)"]
        D_TABS["Tab Bar (top, sticky)"]
        D_CONTENT["Active Tab Content<br/>(scrollable)"]
        D_TOOLBAR["Trading Toolbar<br/>(fixed, collapsible)"]

        D_HEAD --- D_TABS --- D_CONTENT --- D_TOOLBAR
    end

    subgraph Mobile["Mobile Layout (<768px)"]
        M_HEAD["Header (compact)"]
        M_CONTENT["Active Tab Content<br/>(scrollable)"]
        M_TOOLBAR["Trading Toolbar<br/>(2-row compact)"]
        M_NAV["Bottom Nav Bar<br/>(fixed, 5 tabs)"]

        M_HEAD --- M_CONTENT --- M_TOOLBAR --- M_NAV
    end

Live Demo¶

To explore the dashboard, visit https://www.4pass.io and log in. The dashboard includes all views listed above — trading, accounts, orders, symbols, strategy builder, webhooks, audit logs, and admin panel.

Accessibility¶

Feature	Implementation
Focus outlines	`:focus-visible` with accent color ring
Screen readers	`.sr-only` utility class for labels
High contrast	`prefers-contrast: high` media query support
Reduced motion	`prefers-reduced-motion: reduce` disables all animations
Keyboard navigation	Tab order follows visual order
Color contrast	Text on dark backgrounds meets WCAG AA
Touch targets	All interactive elements ≥ 44px
Safe area insets	`env(safe-area-inset-*)` for notched devices

File Map¶

Concept	File
Root component + tab routing	`frontend/src/App.vue`
Tab views (10 files)	`frontend/src/views/*.vue`
Strategy builder components (11)	`frontend/src/components/strategy-builder/`
PineScript code generation	`frontend/src/utils/pinescript-generator.js`
API utilities + CSRF + encryption	`frontend/src/api/index.js`
Tailwind config (design system)	`frontend/tailwind.config.js`
Global styles + fluid tokens	`frontend/src/assets/styles.css`
Vite config (proxy, multi-entry)	`frontend/vite.config.js`
Utility functions	`frontend/src/utils/index.js`
Public pages (landing, FAQ, etc.)	`frontend/public/*.html`