@meridianjs/admin-dashboard 0.1.32 → 0.1.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +103 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
# @meridianjs/admin-dashboard
|
|
2
|
+
|
|
3
|
+
The MeridianJS admin dashboard. A Linear.app-inspired React SPA built with Vite, TanStack Query, Tailwind CSS, and shadcn/ui. Served as a static site alongside your API.
|
|
4
|
+
|
|
5
|
+
## Running in Development
|
|
6
|
+
|
|
7
|
+
The dashboard is automatically started when you run `meridian dev` from a scaffolded project that includes it. It starts on port `5174` (configurable) and proxies API calls to port `9000`.
|
|
8
|
+
|
|
9
|
+
To run the dashboard standalone:
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
cd node_modules/@meridianjs/admin-dashboard
|
|
13
|
+
npm run dev
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
Or via the CLI:
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
meridian serve-dashboard
|
|
20
|
+
meridian serve-dashboard --port 3000
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Tech Stack
|
|
24
|
+
|
|
25
|
+
| Concern | Library |
|
|
26
|
+
|---|---|
|
|
27
|
+
| Framework | React 18 |
|
|
28
|
+
| Build | Vite 5 |
|
|
29
|
+
| Routing | React Router v6 |
|
|
30
|
+
| Data fetching | TanStack Query v5 |
|
|
31
|
+
| Styling | Tailwind CSS + shadcn/ui |
|
|
32
|
+
| Drag & drop | @dnd-kit |
|
|
33
|
+
| Notifications | Sonner |
|
|
34
|
+
| Icons | Lucide React |
|
|
35
|
+
| Theming | next-themes (light / dark) |
|
|
36
|
+
|
|
37
|
+
## Features
|
|
38
|
+
|
|
39
|
+
- **Kanban board** — custom project statuses as columns, drag-and-drop issue reorder, column reorder, hex-tinted column backgrounds
|
|
40
|
+
- **Issue list** — filterable by status, priority, type, assignee, sprint
|
|
41
|
+
- **Issue detail** — inline edit, full-page view, sub-issues, comments, attachments, time tracking
|
|
42
|
+
- **Sprint management** — create, start, complete sprints; move issues between sprints
|
|
43
|
+
- **Project timeline** — Gantt chart with business-day calculations from `@meridianjs/org-calendar`
|
|
44
|
+
- **Workspace settings** — member management (invite, role change, remove), team management with inline member lists
|
|
45
|
+
- **Project access** — per-project member and team grants via `ProjectAccessDialog`
|
|
46
|
+
- **Notifications bell** — real-time count, mark as read
|
|
47
|
+
- **Custom RBAC roles** — create roles with permission strings, assign to users
|
|
48
|
+
- **Org settings** — working-day schedule, public holiday management
|
|
49
|
+
|
|
50
|
+
## Widget / Extension System
|
|
51
|
+
|
|
52
|
+
Inject custom React components into named zones in the dashboard UI without modifying the core package.
|
|
53
|
+
|
|
54
|
+
### Defining Widgets
|
|
55
|
+
|
|
56
|
+
Create `src/admin/widgets/index.tsx` in your project:
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
import React from "react"
|
|
60
|
+
|
|
61
|
+
function MyBanner({ projectId }: { projectId: string }) {
|
|
62
|
+
return (
|
|
63
|
+
<div className="mx-6 my-2 p-3 rounded border border-border text-sm text-muted-foreground">
|
|
64
|
+
Custom panel for project: {projectId}
|
|
65
|
+
</div>
|
|
66
|
+
)
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
export default [
|
|
70
|
+
{ zone: "project.board.before", component: MyBanner },
|
|
71
|
+
]
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
Widgets are compiled at startup by `meridian dev` / `meridian serve-dashboard` via esbuild and loaded by the dashboard at runtime. React is shared via `window.__React` to prevent duplicate instances.
|
|
75
|
+
|
|
76
|
+
### Available Zones
|
|
77
|
+
|
|
78
|
+
| Zone | Page | Props |
|
|
79
|
+
|---|---|---|
|
|
80
|
+
| `issue.details.before` | Issue detail | `{ issue }` |
|
|
81
|
+
| `issue.details.after` | Issue detail | `{ issue }` |
|
|
82
|
+
| `issue.details.sidebar` | Issue detail page | `{ issue }` |
|
|
83
|
+
| `project.board.before` | Kanban board | `{ projectId }` |
|
|
84
|
+
| `project.board.after` | Kanban board | `{ projectId }` |
|
|
85
|
+
| `project.issues.before` | Issue list | `{ projectId }` |
|
|
86
|
+
| `project.issues.after` | Issue list | `{ projectId }` |
|
|
87
|
+
| `project.timeline.before` | Gantt chart | `{ projectId }` |
|
|
88
|
+
| `project.timeline.after` | Gantt chart | `{ projectId }` |
|
|
89
|
+
| `project.sprints.before` | Sprints page | `{ projectId }` |
|
|
90
|
+
| `project.sprints.after` | Sprints page | `{ projectId }` |
|
|
91
|
+
| `workspace.settings.before` | Workspace settings | `{ workspaceId }` |
|
|
92
|
+
| `workspace.settings.after` | Workspace settings | `{ workspaceId }` |
|
|
93
|
+
|
|
94
|
+
## Environment Variables
|
|
95
|
+
|
|
96
|
+
| Variable | Default | Description |
|
|
97
|
+
|---|---|---|
|
|
98
|
+
| `API_URL` | `http://localhost:9000` | API base URL — **must be set in production** |
|
|
99
|
+
| `DASHBOARD_PORT` | `5174` | Port the dashboard serves on |
|
|
100
|
+
|
|
101
|
+
## License
|
|
102
|
+
|
|
103
|
+
MIT
|