Dashboard Guide

Overview

The AltBase dashboard is a single-page application built with Vite 8, React 19, TypeScript, and shadcn/ui v4. It is the primary operator interface for managing projects, data, authentication, storage, workflows, and more.

In production the dashboard is compiled to static files and served directly by the AtlasDB binary from the /dashboard path.

Authentication

Login and Signup

The dashboard opens at /dashboard/login. Enter your platform email and password to authenticate. New users can register at /dashboard/signup.

On successful login the dashboard stores a JWT in localStorage (atlas_token) and redirects to the admin project list.

Admin Project List

Route: /dashboard/admin/projects

After login you land on the project list. From here you can:

• View all projects across your organizations
• Create a new project (provisions a tenant schema automatically)
• Click into any project to open its management shell

Organization Overview

Route: /dashboard/org/:orgId

Shows organization-level information including project cards, member counts, and navigation into individual projects. Switch between organizations using the sidebar rail.

Table Editor

Route: /dashboard/org/:orgId/project/:projectId/editor

A spreadsheet-style interface for browsing and editing data directly in your project tables.

• Browse tables from the sidebar table list
• Inline editing -- click any cell to edit its value
• Create rows with the add-row button
• Delete rows with row selection and bulk delete
• DDL operations -- create tables, add/remove columns, change types
• Validation -- type checking and constraint enforcement before save
• Unsaved-edit protection -- prompts before navigating away with pending changes

SQL Editor

Route: /dashboard/org/:orgId/project/:projectId/sql

A full SQL editor powered by Monaco Editor (the same editor engine as VS Code).

• Syntax highlighting and auto-complete for SQL
• Execute queries with Cmd/Ctrl+Enter
• Result grid with sortable columns
• Query history persisted between sessions
• Export results as CSV or JSON
• Error display with structured messages that do not break editor state

The SQL endpoint requires a service role key. The dashboard uses the project's internal service key automatically.

Auth Management

Route: /dashboard/org/:orgId/project/:projectId/auth

Manage end-user authentication for your project:

• User list -- browse all registered users with email, provider, and status
• Ban / unban users directly from the list
• Auth settings -- toggle email verification, set JWT TTL, configure password strength
• RLS policies -- create, view, and delete row-level security policies
• Provider configuration -- enable OAuth/OIDC/SAML providers from 47 presets (Google, GitHub, Apple, Microsoft, Okta, Azure AD, and more)
• Key rotation -- rotate JWT signing keys with a single click

Storage Browser

Route: /dashboard/org/:orgId/project/:projectId/storage

Manage file storage buckets and objects:

• Bucket list -- create, select, or delete buckets (public or private)
• File upload -- drag-and-drop or click to upload, with progress indicator
• Object browser -- list files with prefix navigation (folder-like)
• File preview -- inline preview for images, PDF, text, and JSON
• Download and delete single or multiple files
• Signed URLs -- generate time-limited download links for private objects

API Docs

Route: /dashboard/org/:orgId/project/:projectId/api-docs

Auto-generated API documentation derived from your project schema:

• Endpoint list for every table with REST paths
• curl examples ready to copy and run
• Schema details showing column names, types, and constraints
• Schema refresh button to regenerate after DDL changes

Logs

Route: /dashboard/org/:orgId/project/:projectId/logs

Query request logs for your project:

• Filter by time range, HTTP method, status code, or path
• Paginate through older entries
• Structured display with request details and timing

Project Settings

Route: /dashboard/org/:orgId/project/:projectId/settings

Configure project-level settings:

• API keys -- view key prefixes, create new keys, revoke existing ones
• Connection info -- copy your project URL, anon key, and service key
• Project metadata -- rename the project
• Danger zone -- delete the project with a confirmation dialog

Workflows

Route: /dashboard/org/:orgId/project/:projectId/workflows

Visual workflow management powered by React Flow (@xyflow/react):

• Workflow list -- view all definitions with status badges (draft, active, paused, archived)
• Visual builder -- drag-and-drop nodes onto a canvas using React Flow with dagre auto-layout
• Node configuration -- configure each step type (HTTP, email, approval, code, delay, branch, loop, parallel, etc.)
• Run monitoring -- view active and completed runs with step-by-step status
• Run history -- inspect step inputs, outputs, errors, and durations
• SSE live updates -- real-time step progress via Server-Sent Events

Setup Hub

Route: /dashboard/org/:orgId/project/:projectId/setup

A guided setup experience for new projects:

• Checklist of recommended configuration steps
• Auth wizard (/setup/auth) -- answer questions about your app and receive recommended auth settings, then validate and apply them
• Status tracking -- see which setup steps are complete

Auth: Customer Organizations & SSO

Route: /dashboard/org/:orgId/project/:projectId/auth/customer-orgs Route: /dashboard/org/:orgId/project/:projectId/auth/sso

Manage B2B authentication:

• Customer organizations -- create and manage customer organizations for B2B multi-tenancy
• SSO connections -- configure SAML/OIDC connections per customer organization
• Domain routing -- map email domains to SSO connections
• User search -- search across auth users with filtering

Integrations

Manage third-party SaaS connections:

• Connection list -- view status of all active integrations (active, auth_error, disconnected)
• OAuth flows -- initiate connection via Nango
• Reconnect -- re-authorize expired connections

Copilot

An AI assistant panel integrated into the dashboard for:

• Natural language queries against your project data
• Quick actions via command palette (Cmd/Ctrl+K)
• Contextual suggestions based on the current page

Notifications

Real-time notification system:

• In-app notifications for workflow completions, trigger events, and system alerts
• Notification center accessible from the header

Onboarding Tour

First-time users are guided through:

• Interactive walkthrough of key dashboard features
• Progressive disclosure of advanced functionality
• Quick start checklist with recommended setup steps

Realtime Inspector

Available within the project shell, the realtime inspector lets you:

• Connect to the WebSocket with your project keys
• Subscribe to channels and observe live CDC events
• Debug message payloads, heartbeats, and connection state

Tech Stack Summary

Layer	Technology
Build tool	Vite 8
Framework	React 19
Language	TypeScript
UI components	shadcn/ui v4 (Base UI + Tailwind CSS 4)
Code editor	Monaco Editor
Workflow builder	React Flow (@xyflow/react) with dagre layout
Routing	React Router v7 (lazy-loaded routes)
Server state	TanStack Query v5
Client state	Zustand v5
Forms	React Hook Form + Zod v4
Icons	Lucide React
Toasts	Sonner
Deployment	Static files served by AtlasDB binary