Dashboard Guide

The Code_ web dashboard is a visual companion to the CLI. Access it at codecard.ai/dashboard.

Signing In

Navigate to /dashboard/login. Enter your email and password. During early access, use the demo credentials:

Overview Page

The default dashboard shows four key metrics at a glance:

• Available Balance — your current spendable balance
• Total Spend (MTD) — month-to-date spend across all projects
• Active Projects — number of projects in active status
• Unread Alerts — pending anomaly alerts requiring attention

Below the metrics, you'll see a spend-by-provider breakdown chart and a quick-access project grid.

Projects

The projects page lists all your projects with status, budget, and descriptions. Click any project to see its detail view.

Creating a project

Click "New Project" to expand the creation form. Enter a name and budget, then click Create. A virtual Visa card is automatically provisioned for the project.

Project detail

Each project's detail page shows:

• P&L cards — Spend, Revenue, Net, and Margin at a glance
• Top Providers — bar chart of where money is going
• Transactions — every charge with merchant, amount, rewards earned, and date

Virtual Cards

The cards page shows all your virtual Visa cards in a grid layout. Each card displays:

• Associated project name
• Card number (last 4 digits)
• Status badge (active / frozen)
• Spend progress bar against monthly limit

Freezing a card

Click the "Freeze" button on any card. A confirmation dialog will appear. Once confirmed, the card is immediately frozen and all transactions will be declined. Click "Unfreeze" to re-enable it.

Spend Analytics

The spend page provides a comprehensive breakdown of your financial activity:

• Category cards — AI APIs (5%), Cloud & Infra (4%), Dev Tools (3%), Other (1%)
• Visual charts — horizontal bar charts by category and by provider
• Transaction list — all transactions with color-coded category indicators, amounts, and reward earnings

Rewards

The rewards page shows your Code Credits ecosystem:

• Balance cards — available credits, pending, lifetime earned and redeemed
• Tier breakdown — progress bars showing earnings per reward tier (5% AI, 4% Cloud, 3% Tools, 1% Other)
• History — timeline of earned and redeemed rewards

Alerts

The alerts page shows all triggered alerts sorted by recency. Each alert shows:

• Severity badge — CRITICAL (pink), WARNING (orange), or INFO (blue)
• Read status — unread alerts have a brighter background and colored dot
• Details — title, message, project name, and timestamp

Alert types include spend spikes, budget thresholds, projected overruns, and new merchant detections.

Settings

The settings page lets you manage your profile and notification preferences. Configure which alerts you receive and how (email, CLI, webhook).

Mobile Access

The dashboard is fully responsive. On mobile devices, the sidebar collapses into a hamburger menu accessible from the top-left. All pages stack vertically and adapt to narrow viewports.