Sandboxes Dashboard
Relevant source files
The following files were used as context for generating this wiki page:
The Sandboxes Dashboard is a specialized administrative interface within the Recoup platform designed to provide visibility into user accounts and their associated sandbox usage. It serves as a centralized hub for administrators to monitor sandbox creation activity, track total sandbox allocations per account, and access deep links to account-specific details and API documentation.
The dashboard is built using Next.js 16 and utilizes a modular architecture, separating data fetching logic (hooks), state management (containers), and presentation (components). It integrates with Privy for secure authentication and TanStack Table for advanced data rendering and sorting capabilities.
Sources: app/sandboxes/page.tsx, components/Sandboxes/SandboxesPage.tsx:5-18, README.md
Architecture and Data Flow
The Sandboxes Dashboard follows a unidirectional data flow pattern, starting from an authenticated API request and ending with a rendered data table.
Data Fetching Layer
The system uses the useAdminSandboxes hook to manage the lifecycle of the data request. This hook utilizes TanStack Query (useQuery) and interacts with the Privy authentication layer to retrieve a bearer token before calling the core fetching utility.
Component Hierarchy
The dashboard is structured into four main layers to ensure separation of concerns:
- Page Level (
app/sandboxes/page.tsx): Defines metadata and serves as the entry point. - View Level (
SandboxesPage.tsx): Sets the layout, breadcrumbs, and headers. - Container Level (
SandboxesTableContainer.tsx): Handles the business logic, loading states, and error messaging from the custom hook. - Presentation Level (
SandboxesTable.tsx): A pure component that renders the data using@tanstack/react-table.
Sources: app/sandboxes/page.tsx, components/Sandboxes/SandboxesPage.tsx, components/Sandboxes/SandboxesTableContainer.tsx:10-40
Data Models and Types
The dashboard relies on standardized TypeScript interfaces to ensure type safety across the network boundary and the UI components.
Sandbox Interfaces
| Field | Type | Description |
|---|---|---|
account_id | string | Unique identifier for the account. |
account_email | string | null | The primary email associated with the account. |
total_sandboxes | number | The cumulative number of sandboxes created by the account. |
last_created_at | string | ISO timestamp of the most recent sandbox creation. |
Sources: types/sandbox.ts:1-6
API Response Structure
The AdminSandboxesResponse ensures that the API returns a status indicator and the account array:
export interface AdminSandboxesResponse {
status: "success" | "error";
accounts: AccountSandboxRow[];
}
Sources: types/sandbox.ts:8-11
Key Features and Implementation
Table Presentation and Sorting
The data is displayed in a Shadcn UI-based table configured with sorting capabilities. By default, the table is sorted by the last_created_at field in descending order to highlight recent activity.
- Sorting: Managed via
useState<SortingState>andgetSortedRowModel. - Columns: Defined in
sandboxesColumns.tsx, including custom cell renderers for emails and formatted dates.
| Column Header | Key | Sorting | Renderer |
|---|---|---|---|
| Account Email | account_email | No | AccountEmailCell |
| Total Sandboxes | total_sandboxes | Yes | Numeric |
| Last Created | last_created_at | Yes | toLocaleString() |
Sources: components/Sandboxes/SandboxesTable.tsx:28-31, components/Sandboxes/sandboxesColumns.tsx:10-58
UI Components and Utilities
The TableSkeleton provides a visual placeholder during the fetch duration, while AccountEmailCell likely links the account to a detailed view (e.g., via account_id).
Sources: components/Sandboxes/SandboxesPage.tsx:11-23, components/Sandboxes/SandboxesTableContainer.tsx:13-39, components/Sandboxes/sandboxesColumns.tsx:15-18
Conclusion
The Sandboxes Dashboard provides a robust administrative tool for monitoring platform usage. By utilizing TanStack Table and modern React hooks, it ensures a responsive and type-safe experience for managing account sandbox statistics across the Recoup ecosystem.