feat(ui): 🎉 More ui work
* Implement EventLogsPage for viewing system activity logs with search and filter capabilities. * Create HooksPage for managing webhook configurations with create, edit, and delete functionalities. * Develop LoginPage for user authentication with error handling and loading states. * Add UsersPage for managing system users, including role assignment and status toggling. * Introduce authStore for managing user authentication state and actions. * Define TypeScript types for User, Hook, EventLog, and other entities. * Set up TypeScript configuration for the project. * Configure Vite for development with proxy settings for API calls. * Update dependencies for improved functionality and security.
This commit is contained in:
Hein
99
PLAN.md
99
PLAN.md
@@ -27,26 +27,83 @@ Instance / Config level hooks and whatsapp accounts.
|
||||
- CI/CD: GitHub Actions workflows with lint and test steps.
|
||||
- Static pages: Privacy policy and terms of service served via the server.
|
||||
|
||||
Second Phase:
|
||||
Second Phase: IN PROGRESS
|
||||
|
||||
- Setup a tooldoc folder for you if not exists to save summaries of the tools you must use. Reference what is there as well. Update it if you found new tools or more information on tools.
|
||||
- Save library and tools usage instructions for you.
|
||||
- Make a code guideline for you
|
||||
- Use makefile to build, test and migrate. For backend and frontend. e.g. build build-ui build-server etc.
|
||||
- Storage in postgresql and sqlite based on user selection.
|
||||
- Use relspecgo to convert dbml database models to BUN models. https://git.warky.dev/wdevs/relspecgo
|
||||
- Place sql in sql/ folder, dbml models in sql/schema.dbml file
|
||||
- Scripts in sql/postgres and sql/sqlite folders
|
||||
- Place models in models package
|
||||
- webserver package: Use https://github.com/bitechdev/ResolveSpec It has a server package. Its has security and authentication as well. Use as much as you can from ResolveSpec for the project.
|
||||
- Link: https://github.com/bitechdev/ResolveSpec
|
||||
- Use BUN ORM
|
||||
- Use React with Mantine and Tanstack Start for the admin site.
|
||||
- api subpackage: Must contain all API endpoints and implement https://github.com/bitechdev/ResolveSpec
|
||||
- Use oranguru for grids and forms. -> https://git.warky.dev/wdevs/oranguru
|
||||
COMPLETED:
|
||||
|
||||
- Interface:
|
||||
- auth package: This package should handle authentication in a secure way. It should be able to authenticate users, generate tokens, and verify user credentials. Use Resolvespec for API Auth.
|
||||
- User login
|
||||
- API Keys per user.
|
||||
- User interace to setup user level hooks and whatsapp accounts.
|
||||
- ✅ Storage setup with PostgreSQL and SQLite support
|
||||
- ✅ Database models generated in models package (7 tables: users, api_keys, hooks, whatsapp_accounts, event_logs, sessions, message_cache)
|
||||
- ✅ ResolveSpec integration with unified server architecture (pkg/api/server.go)
|
||||
- ✅ Combined authentication system (JWT + legacy auth support)
|
||||
- ✅ Database initialization with SQLite/PostgreSQL compatibility (pkg/storage/db.go)
|
||||
- ✅ BUN ORM integration with repository pattern (pkg/storage/repository.go)
|
||||
- ✅ React frontend with Vite
|
||||
- ✅ User authentication flow (login/logout with JWT tokens)
|
||||
- ✅ Frontend routing with protected routes (React Router)
|
||||
- ✅ Dashboard layout with sidebar navigation
|
||||
- ✅ Default admin user seeding (admin/admin123)
|
||||
- ✅ ResolveSpec auto-generated CRUD endpoints for all models
|
||||
- ✅ API client with JWT interceptors (web/src/lib/api.ts)
|
||||
- ✅ TypeScript types for all models (web/src/types/index.ts)
|
||||
- ✅ UsersPage with full CRUD operations (vanilla CSS implementation)
|
||||
- ✅ HooksPage with hooks list and CRUD operations (vanilla CSS implementation)
|
||||
- ✅ AccountsPage with WhatsApp accounts management (vanilla CSS implementation)
|
||||
- ✅ Mantine UI library installed (@mantine/core, @mantine/hooks, @mantine/form, @mantine/notifications, @mantine/modals, @mantine/dates)
|
||||
- ✅ oranguru installed for grids and forms (with --legacy-peer-deps due to React 19)
|
||||
|
||||
IN PROGRESS:
|
||||
|
||||
- 🚧 Refactoring all pages to use Mantine components (replacing vanilla CSS)
|
||||
- 🚧 Configuring Mantine theme and providers
|
||||
- 🚧 Integrating oranguru for data grids
|
||||
|
||||
CURRENT REQUIREMENTS:
|
||||
|
||||
- ✅ **MUST USE Mantine UI library** (https://mantine.dev/core/package/) - Provides default styles, eliminates need for custom CSS
|
||||
- ✅ **MUST USE oranguru** (https://git.warky.dev/wdevs/oranguru) - Required for grids and forms (npm install @warkypublic/oranguru)
|
||||
|
||||
- 🚧 **Frontend MUST be served at /ui/ route** - Not root path, Go server serves /ui/\* for admin interface
|
||||
- 🚧 Update vite config for /ui/ base path
|
||||
- 🚧 Update Go server to serve SPA at /ui/ instead of root
|
||||
|
||||
TODO:
|
||||
|
||||
- ⏳ Refactor UsersPage to use Mantine Table and oranguru DataGrid
|
||||
- ⏳ Refactor HooksPage to use Mantine components
|
||||
- ⏳ Refactor AccountsPage to use Mantine components
|
||||
- ⏳ EventLogsPage with filtering and pagination using Mantine + oranguru
|
||||
- ⏳ DashboardPage with real statistics using Mantine components
|
||||
- ⏳ Remove all custom CSS files after Mantine migration
|
||||
- ⏳ Configure Mantine MantineProvider in App.tsx
|
||||
- ⏳ Makefile for build, test and migrate (backend + frontend)
|
||||
- ⏳ tooldoc folder setup for tool documentation
|
||||
|
||||
ARCHITECTURE NOTES:
|
||||
|
||||
- Unified server on single port (8080, configurable)
|
||||
- No more Phase 1/Phase 2 separation - single ResolveSpec server
|
||||
- Combined authentication: JWT (new) + API key/basic auth (legacy backward compatibility)
|
||||
- **Frontend served at /ui/ route** (not root) - built to web/dist/ and served by Go server
|
||||
- API endpoints at /api/v1/\* and WhatsApp webhooks at root level
|
||||
- Database models without schema prefix (works with both SQLite and PostgreSQL)
|
||||
- Table creation uses dual-path for SQLite/PostgreSQL compatibility
|
||||
- Have to use relspecgo for model generation and updates.
|
||||
|
||||
ROUTING STRUCTURE:
|
||||
|
||||
```
|
||||
/ (root) → WhatsApp API endpoints (legacy Phase 1)
|
||||
/health → Health check
|
||||
/api/send → Send WhatsApp messages
|
||||
/api/hooks → Legacy hooks endpoint
|
||||
/webhooks/whatsapp/* → WhatsApp webhook receivers
|
||||
/api/v1/* → REST API (ResolveSpec auto-generated CRUD)
|
||||
/ui/* → React Admin UI (Mantine + oranguru)
|
||||
```
|
||||
|
||||
KEY CHANGES FROM ORIGINAL PLAN:
|
||||
|
||||
- Using React + Vite (not Tanstack Start)
|
||||
- **NOW USING Mantine UI** (REQUIRED - installed and being integrated)
|
||||
- **NOW USING oranguru** (REQUIRED - installed with --legacy-peer-deps)
|
||||
- **Admin UI at /ui/ route instead of root** (REQUIRED)
|
||||
|
||||
Reference in New Issue
Block a user