madapes/madbase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
madbase/UX_ROADMAP.md
Vlad Durnea a66d908eff
Some checks failed
CI / podman-build (push) Has been cancelled
Details
CI / rust (push) Has been cancelled
Details
chore: full stack stability and migration fixes, plus react UI progress
2026-03-18 09:01:38 +02:00

2.7 KiB
Raw Permalink Blame History

UX Roadmap: React UI Unification & Infrastructure Scaling

Goal

Consolidate all administrative functionality into the React-based control-plane-ui, retiring the legacy Vue/CDN implementation, and introducing premium infrastructure management features.

Phase 1: Feature Parity (Migration) [DONE]

Bring over the core "Studio" features from the Vue implementation to React.

1.1 Auth Management [DONE]

  • User List: Data grid with search/filter (MUI DataGrid).
  • User Details: Sidebar or modal showing user metadata and actions (Ban, Reset Password, Delete).

1.2 Storage Browser [DONE]

  • Bucket Explorer: Sidebar to switch between buckets.
  • File Manager: Table view with file type icons, size estimation, and direct upload/download/delete support.

1.3 Database & Functions [DONE]

  • Data View: Schema-aware table browser with pagination.
  • Edge Functions: Monaco-style editor for Deno functions with a sleek "Deploy" animation.

1.4 Observability [DONE]

  • Realtime Console: Live event stream with color-coded "IN/OUT/SYS" messages.
  • Logs Viewer: Integrated LogQL search for Loki logs.

Phase 2: Pillar Scaling & "Wow" Factor [DONE]

Implement the advanced infrastructure management features.

2.1 Dashboard Overhaul [DONE]

  • Pillar Cards: Dynamic, animated cards for Worker, Database, ProxyAPI, and System.
  • Live Sparklines: Small charts showing real-time resource usage per pillar.
  • Scaling Status: Pulse animations and progress bars during active scaling operations.

2.2 Premium Scaling Workflow [DONE]

  • Glassmorphism Modals: Replace browser confirm() with high-fidelity modals.
  • Financial Transparency: Real-time cost impact calculation (e.g., "This will add €5.20/mo to your bill").
  • Time Estimation: Visual countdown or progress indicator for node provisioning.

2.3 Visual Excellence [DONE]

  • Deep Dark Mode: Refine the MUI theme with custom HSL colors and subtle borders.
  • Micro-animations: Framer Motion for page transitions and button interactions.

Phase 3: Unification & Cleanup [DONE]

  • Internal Routing: Ensure consistent breadcrumbs and navigation.
  • Proxy Integration: Update the Gateway to serve the React build at /dashboard (SPA).
  • Deprecation: Remove the web/ directory and all Vue dependencies.

Phase 4: Verification [IN PROGRESS]

  • E2E Expansion: Add Playwright tests for every migrated feature.
  • Visual Regression: Ensure layout consistency across different viewports.
  • Podman Validation: Full stack deployment and verification.
Reference in New Issue View Git Blame Copy Permalink