Project Details View

The project details page at /console/projects/[projectId] provides a comprehensive view of a single project with tabbed navigation for managing all project-related resources.

Screenshot of project details page showing tabbed interface

Accessing Project Details

Click on any project from the Projects list (/console/projects) to open its detailed view. The page URL includes the project UUID:

/console/projects/123e4567-e89b-12d3-a456-426614174000

Tabbed Interface

The project details page organizes information into four main tabs:

Overview Tab

The Overview tab displays project metadata and key statistics.

Project Information:

Project name and description
Created date and last updated timestamp
Project status (Active/Inactive)
Project UUID for reference

Statistics Cards:

API Keys: Total number of API keys generated for this project
Members: Total end users registered through this project
Generations: Total AI generations requested (if applicable)
Status: Current project health indicator

API Keys Tab

Manage project API keys with full CRUD operations. (((REPLACE_THIS_WITH_IMAGE: project-api-keys-tab-management.png: Screenshot of API Keys tab with key list and generate button))) Features:

View API Keys: List all API keys with key prefix, name, and creation date
Generate New Key: Create new API keys with optional names
Copy Key: One-click copy to clipboard (full key shown only once at generation)
Revoke Key: Delete API keys to prevent further use
Last Used: Track when each key was last accessed

API Key List Columns:

Key Prefix: First 8 characters for identification (e.g., dk_abc123)
Name: Optional descriptive name for the key
Created At: Key generation timestamp
Last Used: Last API access timestamp
Actions: Copy and delete options

Full API keys are only displayed once during generation. Store them securely immediately after creation.

Generating a New API Key:

Click “Generate API Key” button
Enter optional key name in dialog
Click “Generate” to create key
Copy the full key from the success dialog
Store key securely (it won’t be shown again)

Members Tab

View and manage end users associated with this project. (((REPLACE_THIS_WITH_IMAGE: project-members-tab-filters.png: Screenshot of Members tab with user list and filters))) Features:

Member List: All end users who registered through this project
Search: Filter members by email address
Status Filter: Filter by active/inactive status
Role Filter: Filter by user role
Pagination: Navigate through large member lists
Member Details: View individual member information

Member List Columns:

Email: User’s registered email
Full Name: Display name (if provided)
Role: User role (typically “end_user”)
Status: Active or inactive indicator
Joined: Registration date
Actions: View details, manage access (coming soon)

Filtering Members: Search by email:

Search input: "user@example.com"

Filter by status:

All Members
Active Only
Inactive Only

Filter by role:

All Roles
End User
Developer (if applicable)

Pagination:

20 members per page (default)
Previous/Next navigation
Page indicator showing current page and total

Use the search and filters together to quickly locate specific members in large projects.

Settings Tab

Configure project settings and manage project lifecycle.

General Settings:

Project Name: Update project display name
Description: Modify project description
Status: Toggle project active/inactive status

Danger Zone:

Actions in the Danger Zone are irreversible. Proceed with caution.

Deactivate Project: Temporarily disable project (can be reactivated)
Delete Project: Permanently remove project and all associated data

The Deactivate and Delete buttons are currently disabled while the feature is in development. This functionality will be enabled in a future release.

Payments Tab

Configure and monitor payment processing for your project. (((REPLACE_THIS_WITH_IMAGE: project-payments-tab-overview.png: Screenshot of Payments tab showing Stripe configuration status, mode toggle, and payment statistics))) Stripe Configuration Status: The Payments tab displays the current state of Stripe integration for your project:

Configured (Test Mode): Stripe test credentials are set up and ready for testing
Configured (Live Mode): Production credentials are active
Not Configured: No Stripe credentials have been added yet

Stripe credentials are stored per-project with separate test and live mode configurations. This allows you to test thoroughly before going live without affecting production settings.

Mode Toggle: Switch between Test and Live modes to manage different credential sets:

Test mode uses Stripe test API keys for development
Live mode uses production API keys for real transactions
Each mode has its own webhook secret for secure event processing

Payment Statistics Cards:

Metric	Description
Active Subscriptions	Number of currently active subscriptions in selected mode
Total Transactions	Count of all payment transactions processed
Revenue (MTD)	Month-to-date revenue (live mode only)
Failed Payments	Transactions that failed or were declined

Subscriptions List: View all subscriptions for your project with filtering options:

Status Filter: active, trialing, past_due, cancelled, all
Search: Filter by user email
Pagination: Navigate large subscription lists

Column	Description
User	Email of the subscribed user
Plan	Subscription price/plan name
Status	Current subscription status with color badge
Started	Subscription creation date
Renews/Ends	Next billing date or cancellation date
Actions	View details, cancel subscription

Transaction History: Track all payment transactions with detailed information:

Column	Description
Date	Transaction timestamp
User	Customer email address
Amount	Transaction amount with currency
Type	Payment, refund, or failed
Status	succeeded, pending, failed, refunded
Invoice	Link to Stripe invoice (if available)

Quick Actions:

Configure Stripe: Open Stripe configuration dialog
View Webhook URLs: Copy webhook URLs for Stripe dashboard
Test Payment: Create a test checkout session (test mode only)
Open Stripe Dashboard: Link to Stripe’s project dashboard

Use the “Test Payment” action to verify your integration is working correctly before switching to live mode.

Configuring Stripe Credentials:

Click “Configure Stripe” button
Select mode (Test or Live)
Enter your Stripe API keys from Stripe Dashboard
Enter your webhook signing secret
Click “Validate & Save” to verify credentials
Copy the webhook URL and add it to your Stripe dashboard

Never share your Stripe secret keys. They are encrypted before storage and never displayed after initial entry.

For complete setup instructions, see the Payment Setup & Configuration guide.

Project Statistics

The Overview tab displays real-time statistics fetched from the Cloud API: API Keys Count:

GET /api/v1/projects/{projectId}/api-keys
// Returns: Array of ApiKey objects
// Count: apiKeys.length

Members Count:

GET /api/v1/projects/{projectId}/users
// Returns: Array of User objects
// Count: users.length

Status Indicator:

Active: Project is operational and accepting requests
Inactive: Project is disabled (API keys won’t work)
Error: Configuration or system issues detected

Data Loading

The project details page uses React Suspense for optimal loading:

<Suspense fallback={<LoadingSpinner />}>
  <ProjectDetailContent projectId={projectId} />
</Suspense>

Loading States:

Initial page load shows skeleton UI
Tab switching is instant (data pre-loaded)
API key generation shows loading dialog
Member list pagination shows inline loading

Server Actions

The page uses several server actions for data fetching and mutations: Fetch Project:

fetchProject(projectId: string)
  -> GET /api/v1/projects/{projectId}
  -> Returns: Project

Fetch API Keys:

fetchProjectApiKeys(projectId: string)
  -> GET /api/v1/projects/{projectId}/api-keys
  -> Returns: ApiKey[]

Generate API Key:

generateApiKeyAction(projectId: string, name?: string)
  -> POST /api/v1/projects/{projectId}/api-keys
  -> Body: { name }
  -> Returns: { id, key, key_prefix, name, created_at }

Delete API Key:

deleteApiKeyAction(projectId: string, keyId: string)
  -> DELETE /api/v1/projects/{projectId}/api-keys/{keyId}
  -> Returns: Success confirmation

Fetch Members:

fetchProjectMembers(projectId: string, params: FilterParams)
  -> GET /api/v1/projects/{projectId}/users
  -> Query: page, limit, search, status, role
  -> Returns: { users: User[], total: number }

Security and Permissions

Developer-Scoped Access:

Developers can only access their own projects
RBAC enforced via X-Developer-Key header
Project ID validated against developer ownership

Role Enforcement:

Project details page requires developer role
requireRole(['developer']) enforced in layout
Unauthorized users redirected to dashboard

API Key Security:

Full keys shown only once at generation
Key prefixes displayed for identification
Hashed keys stored in database (SHA256)

Breadcrumb Trail:

Console > Projects > [Project Name]

Quick Navigation:

Back to Projects list
Jump to specific tab via URL hash
Keyboard shortcuts (coming soon)

Best Practices

Organize API keys with descriptive names to easily identify their purpose (e.g., “Production App”, “Staging Environment”).

API Key Management:

Name keys descriptively when generating
Rotate keys periodically for security
Delete unused keys immediately
Monitor “Last Used” timestamps
Use separate keys for different environments

Member Management:

Regularly review active members
Use search to locate specific users quickly
Monitor registration patterns for suspicious activity
Keep member lists organized with filters

Project Settings:

Keep project name and description up-to-date
Use deactivation to temporarily disable projects
Back up important data before deletion
Document configuration changes

Troubleshooting

Project Not Loading

If project details fail to load:

Verify project ID is valid UUID
Check developer key has access to project
Ensure project hasn’t been deleted
Review browser console for API errors

API Keys Not Displaying

If API key list is empty:

Generate a new key to test
Check API key endpoint permissions
Verify project is active
Review backend logs for errors

Members Not Showing

If members list is empty:

Verify end users have registered through project app
Check project ID is correctly configured in app
Ensure member registration events are processing
Review projector logs for errors

Creating Projects

Learn how to create new projects

Managing API Keys

Complete guide to API key management

Viewing End Users

Manage end users across all projects

Project Settings

Configure project options

Getting Started

Project Management

API Key Management

User Management

Payment Management

Console Features

Accessing Project Details

Tabbed Interface

Overview Tab

API Keys Tab

Members Tab

Settings Tab

Payments Tab

Project Statistics

Data Loading

Server Actions

Security and Permissions

Navigation

Best Practices

Troubleshooting

Project Not Loading

API Keys Not Displaying

Members Not Showing

Creating Projects

Managing API Keys

Viewing End Users

Project Settings

Getting Started

Project Management

API Key Management

User Management

Payment Management

Console Features

​Accessing Project Details

​Tabbed Interface

​Overview Tab

​API Keys Tab

​Members Tab

​Settings Tab

​Payments Tab

​Project Statistics

​Data Loading

​Server Actions

​Security and Permissions

​Navigation

​Best Practices

​Troubleshooting

​Project Not Loading

​API Keys Not Displaying

​Members Not Showing

​Related Pages

Creating Projects

Managing API Keys

Viewing End Users

Project Settings

Accessing Project Details

Tabbed Interface

Overview Tab

API Keys Tab

Members Tab

Settings Tab

Payments Tab

Project Statistics

Data Loading

Server Actions

Security and Permissions

Navigation

Best Practices

Troubleshooting

Project Not Loading

API Keys Not Displaying

Members Not Showing

Related Pages