Dashboard Guide
Tour of the AltBase dashboard covering every page, from table editing and SQL to auth management, storage, workflows, and project settings.
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 |