Admin Dashboard (@messagejs/dashboard)
Relevant source files
The following files were used as context for generating this wiki page:The @messagejs/dashboard package is the administrative user interface for the MessageJS ecosystem. It is a React/Next.js application designed for developers to manage their projects, configure messaging connectors, generate API keys, and monitor message logs and analytics. The dashboard interacts directly with the @messagejs/core backend API to perform these management tasks.
As described in the project's documentation, the dashboard is a key component that enables users to self-serve and configure the messaging service without direct code or database manipulation. While the core infrastructure is in development, the dashboard UI is currently in a planned state, with placeholder content indicating it is "Coming soon...".
Sources: packages/dashboard/package.json:4, mono-repo.md:9, packages/dashboard/src/app/page.tsx:4, QUICK_START.md:13-19
Architecture and Technology Stack
The dashboard is a standalone package within the messagejs monorepo. It is built as a modern web application using Next.js and React.
Sources: packages/dashboard/package.json, mono-repo.md:9
Component Interaction
The following diagram illustrates how the Admin Dashboard fits into the overall MessageJS system, acting as the primary user-facing management tool that communicates with the backend API.
This diagram shows the Admin Dashboard as the user's interface to the Core API.
Sources: README.md:46-48, mono-repo.md
Technology Stack
The dashboard's dependencies are defined in its package.json file.
| Technology | Version | Description |
|---|---|---|
next | ^14.0.0 | The React framework for building the application. |
react | ^18.2.0 | The UI library for building components. |
react-dom | ^18.2.0 | Serves as the entry point to the DOM and server renderers for React. |
typescript | ^5.3.3 | The language used for static typing. |
@messagejs/shared-types | * | Shared TypeScript types used across the monorepo. |
Sources: packages/dashboard/package.json:12-21
Application Layout
The basic structure of the Next.js application is defined in layout.tsx, which sets the root HTML document and metadata for the dashboard pages.
// packages/dashboard/src/app/layout.tsx:1-12
export const metadata = {
title: 'MessageJS Dashboard',
description: 'Manage your messaging projects',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
The main page component currently displays a placeholder message, confirming the feature is planned for future development.
Sources: packages/dashboard/src/app/layout.tsx:1-12, packages/dashboard/src/app/page.tsx:1-7
Features and API Integration
The dashboard is designed to provide a user-friendly interface for all management tasks supported by the @messagejs/core API. The user authenticates via email and password to receive a JWT, which is then used to authorize all subsequent API requests from the dashboard.
Sources: API_REFERENCE.md:11-33, QUICK_START.md:22-60
User Setup Flow
The QUICK_START.md guide outlines the primary workflow a user follows within the dashboard to begin sending messages.
This flowchart shows the step-by-step process for a new user to get started via the dashboard.
Sources: QUICK_START.md:13-60
Core Management Functions
The dashboard will provide UI controls for the following backend API resources. All dashboard-related endpoints require a Bearer <jwt_token> in the Authorization header.
Sources: API_REFERENCE.md:80-400
Project Management
Users can create, view, update, and delete their projects. A project is the main container for connectors, API keys, and message logs.
| Action | HTTP Method | Endpoint |
|---|---|---|
| List Projects | GET | /api/v1/projects |
| Create Project | POST | /api/v1/projects |
| Get Project | GET | /api/v1/projects/:id |
| Update Project | PUT | /api/v1/projects/:id |
| Delete Project | DELETE | /api/v1/projects/:id |
Sources: API_REFERENCE.md:83-149
Connector Management
This is where users configure the third-party messaging services (e.g., WhatsApp, Twilio) they want to use.
The following sequence diagram shows the process of adding a new WhatsApp connector.
This diagram details the API interaction for creating a new connector.
Sources: API_REFERENCE.md:209-253, QUICK_START.md:32-41
API Key Management
Users can generate and revoke API keys, which are used to authenticate requests from the @messagejs/client SDK.
| Action | HTTP Method | Endpoint |
|---|---|---|
| List API Keys | GET | /api/v1/projects/:projectId/keys |
| Create API Key | POST | /api/v1/projects/:projectId/keys |
| Delete API Key | DELETE | /api/v1/projects/:projectId/keys/:keyId |
Sources: API_REFERENCE.md:152-198
Other Features
The dashboard is also planned to support:
- Message Logs: Viewing a list of all sent messages, their statuses, and details. (
GET /api/v1/messages) - Templates: Creating and managing reusable message templates. (
/api/v1/projects/:projectId/templates) - Analytics: Visualizing message statistics and usage data. (
/api/v1/analytics/messages)
Sources: API_REFERENCE.md:301-426, QUICK_START.md:120-123
Development and Scripts
The dashboard can be run in development mode using a script defined in the root package.json.
| Script | Command | Description |
|---|---|---|
dashboard | npm run dev --workspace=packages/dashboard | Starts the Next.js development server for the dashboard package. |
dev | next dev | (Inside packages/dashboard) Starts the Next.js development server. |
build | next build | (Inside packages/dashboard) Builds the application for production. |
Sources: package.json:13, packages/dashboard/package.json:6-8
Summary
The @messagejs/dashboard is a crucial, though currently undeveloped, part of the MessageJS project. It is architected as a Next.js application that will serve as the central management hub for users. By interacting with the secure, JWT-protected endpoints of the @messagejs/core API, it will empower developers to manage projects, connectors, API keys, and templates, as well as monitor messaging activity and analytics. Its implementation will complete the user-friendly, self-service vision of the MessageJS platform.
Sources: README.md:19-23, QUICK_START.md:13-19, packages/dashboard/src/app/page.tsx:4