Dashboard

XActions includes a web dashboard with 30+ pages for managing automations, analytics, and tools — all with a dark theme matching X/Twitter's UI.

Accessing the Dashboard

Local Development

# Start the API server (serves dashboard too)
node api/server.js

# Or use the dashboard server directly
node dashboard-server.js

Open http://localhost:3001 in your browser.

Production

Visit xactions.app or deploy your own instance (see deployment.md).

Pages

Core

Automation & Tools

Analytics & Monitoring

Content

AI & Integrations

Team & Settings

Info Pages

Architecture

The dashboard is a collection of static HTML files in the dashboard/ directory. Each page is self-contained with inline CSS and JavaScript — no build step required.

dashboard/
├── index.html              # Main dashboard with sidebar nav
├── css/                    # Shared styles
├── js/                     # Shared JavaScript
├── data/                   # Static data files
│   └── tweet-price/        # Price correlation data (15 assets)
└── tutorials/              # Tutorial sub-pages

Design System

• Dark theme — #0a0a0f background, #131722 cards, #1d9bf0 accent (X blue)
• Font stack — system fonts (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto)
• Components — stat cards, data tables, charts (Chart.js / TradingView), tab navigation
• Responsive — mobile-friendly with breakpoints at 768px and 1024px

Navigation

The main dashboard (index.html) includes a sidebar with links to all pages, organized by category with SVG icons.

API Integration

Dashboard pages communicate with the Express.js backend at /api/*. Key endpoints:

Real-Time Updates

Pages use Socket.IO for live data:

const socket = io();
socket.on('operation:progress', (data) => { /* update progress bar */ });
socket.on('graph:complete', (data) => { /* reload graph */ });
socket.on('stream:data', (data) => { /* new stream event */ });

Customization

Adding a New Dashboard Page

1. Create dashboard/your-page.html
2. Use the standard template (copy structure from an existing page)
3. Add a nav link in dashboard/index.html sidebar
4. If it needs API data, add a route in api/routes/

Theming

Override CSS variables at the top of any page:

:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #131722;
  --bg-card: #1a1e2e;
  --accent: #1d9bf0;
  --text-primary: #d1d4dc;
  --text-secondary: #787b86;
  --border: #2a2e39;
  --green: #26a69a;
  --red: #ef5350;
}