chore: initial project import
Some checks failed
CI - Production Readiness / Verify (push) Has been cancelled
Some checks failed
CI - Production Readiness / Verify (push) Has been cancelled
This commit is contained in:
Wira Basalamah
402
route-map-nextjs-whatsapp-inbox.md
Normal file
402
route-map-nextjs-whatsapp-inbox.md
Normal file
@ -0,0 +1,402 @@
|
||||
# Route Map Next.js WhatsApp Inbox MVP
|
||||
|
||||
Dokumen ini memetakan semua screen ke struktur route `Next.js App Router`. Struktur ini dibuat agar:
|
||||
- mudah dipahami tim frontend
|
||||
- konsisten dengan role-based access
|
||||
- mendukung multi-tenant SaaS
|
||||
- memisahkan area `super admin`, `admin client`, dan `agent`
|
||||
|
||||
Catatan:
|
||||
- route final bisa disederhanakan nanti
|
||||
- nama segmen dalam tanda kurung adalah route groups
|
||||
- tenant context diasumsikan berasal dari session + tenant scoping, bukan selalu dari slug di URL
|
||||
|
||||
## 1. Struktur Global
|
||||
|
||||
```text
|
||||
app/
|
||||
(public)/
|
||||
login/page.tsx
|
||||
forgot-password/page.tsx
|
||||
reset-password/page.tsx
|
||||
invite/[token]/page.tsx
|
||||
unauthorized/page.tsx
|
||||
|
||||
(app)/
|
||||
layout.tsx
|
||||
profile/page.tsx
|
||||
profile/edit/page.tsx
|
||||
profile/change-password/page.tsx
|
||||
notifications/page.tsx
|
||||
search/page.tsx
|
||||
|
||||
(super-admin)/
|
||||
super-admin/
|
||||
page.tsx
|
||||
tenants/
|
||||
page.tsx
|
||||
new/page.tsx
|
||||
[tenantId]/
|
||||
page.tsx
|
||||
edit/page.tsx
|
||||
channels/new/page.tsx
|
||||
channels/
|
||||
page.tsx
|
||||
[channelId]/page.tsx
|
||||
billing/
|
||||
plans/page.tsx
|
||||
subscriptions/page.tsx
|
||||
invoices/page.tsx
|
||||
invoices/[invoiceId]/page.tsx
|
||||
reports/page.tsx
|
||||
audit-log/page.tsx
|
||||
security-events/page.tsx
|
||||
webhook-logs/page.tsx
|
||||
alerts/page.tsx
|
||||
settings/page.tsx
|
||||
|
||||
(tenant-admin)/
|
||||
dashboard/page.tsx
|
||||
inbox/page.tsx
|
||||
contacts/
|
||||
page.tsx
|
||||
new/page.tsx
|
||||
import/page.tsx
|
||||
export/page.tsx
|
||||
segments/page.tsx
|
||||
segments/new/page.tsx
|
||||
segments/[segmentId]/page.tsx
|
||||
[contactId]/page.tsx
|
||||
[contactId]/edit/page.tsx
|
||||
templates/
|
||||
page.tsx
|
||||
new/page.tsx
|
||||
[templateId]/page.tsx
|
||||
[templateId]/edit/page.tsx
|
||||
campaigns/
|
||||
page.tsx
|
||||
new/page.tsx
|
||||
review/page.tsx
|
||||
[campaignId]/page.tsx
|
||||
[campaignId]/recipients/page.tsx
|
||||
team/
|
||||
page.tsx
|
||||
new/page.tsx
|
||||
[userId]/page.tsx
|
||||
[userId]/edit/page.tsx
|
||||
performance/page.tsx
|
||||
reports/
|
||||
page.tsx
|
||||
response-time/page.tsx
|
||||
resolution/page.tsx
|
||||
agent-productivity/page.tsx
|
||||
campaign-analytics/page.tsx
|
||||
contact-growth/page.tsx
|
||||
settings/
|
||||
page.tsx
|
||||
profile/page.tsx
|
||||
business-hours/page.tsx
|
||||
auto-assignment/page.tsx
|
||||
tags/page.tsx
|
||||
canned-responses/page.tsx
|
||||
integrations/page.tsx
|
||||
billing/
|
||||
page.tsx
|
||||
history/page.tsx
|
||||
invoices/[invoiceId]/page.tsx
|
||||
audit-log/page.tsx
|
||||
|
||||
(agent)/
|
||||
agent/
|
||||
page.tsx
|
||||
inbox/page.tsx
|
||||
inbox/unassigned/page.tsx
|
||||
inbox/mentioned/page.tsx
|
||||
inbox/resolved/page.tsx
|
||||
contacts/page.tsx
|
||||
contacts/[contactId]/page.tsx
|
||||
quick-tools/page.tsx
|
||||
performance/page.tsx
|
||||
```
|
||||
|
||||
## 2. Public Routes
|
||||
|
||||
### 2.1 Auth
|
||||
- `/login`
|
||||
- `/forgot-password`
|
||||
- `/reset-password`
|
||||
- `/invite/[token]`
|
||||
- `/unauthorized`
|
||||
|
||||
## 3. Shared App Routes
|
||||
|
||||
### 3.1 Shared User Area
|
||||
- `/profile`
|
||||
- `/profile/edit`
|
||||
- `/profile/change-password`
|
||||
- `/notifications`
|
||||
- `/search`
|
||||
|
||||
## 4. Super Admin Routes
|
||||
|
||||
### 4.1 Dashboard
|
||||
- `/super-admin`
|
||||
|
||||
### 4.2 Tenants
|
||||
- `/super-admin/tenants`
|
||||
- `/super-admin/tenants/new`
|
||||
- `/super-admin/tenants/[tenantId]`
|
||||
- `/super-admin/tenants/[tenantId]/edit`
|
||||
- `/super-admin/tenants/[tenantId]/channels/new`
|
||||
|
||||
### 4.3 Channels
|
||||
- `/super-admin/channels`
|
||||
- `/super-admin/channels/[channelId]`
|
||||
|
||||
### 4.4 Billing
|
||||
- `/super-admin/billing/plans`
|
||||
- `/super-admin/billing/subscriptions`
|
||||
- `/super-admin/billing/invoices`
|
||||
- `/super-admin/billing/invoices/[invoiceId]`
|
||||
|
||||
### 4.5 Reports and Governance
|
||||
- `/super-admin/reports`
|
||||
- `/super-admin/audit-log`
|
||||
- `/super-admin/security-events`
|
||||
- `/super-admin/webhook-logs`
|
||||
- `/super-admin/alerts`
|
||||
- `/super-admin/settings`
|
||||
|
||||
## 5. Admin Client Routes
|
||||
|
||||
### 5.1 Dashboard and Inbox
|
||||
- `/dashboard`
|
||||
- `/inbox`
|
||||
|
||||
Catatan:
|
||||
- inbox list dan conversation detail paling efisien dibuat dalam satu route dengan split layout
|
||||
- selected conversation bisa disimpan di query param seperti `?conversationId=xxx`
|
||||
|
||||
Alternatif kalau ingin route detail eksplisit:
|
||||
- `/inbox/[conversationId]`
|
||||
|
||||
### 5.2 Contacts
|
||||
- `/contacts`
|
||||
- `/contacts/new`
|
||||
- `/contacts/import`
|
||||
- `/contacts/export`
|
||||
- `/contacts/segments`
|
||||
- `/contacts/segments/new`
|
||||
- `/contacts/segments/[segmentId]`
|
||||
- `/contacts/[contactId]`
|
||||
- `/contacts/[contactId]/edit`
|
||||
|
||||
### 5.3 Templates
|
||||
- `/templates`
|
||||
- `/templates/new`
|
||||
- `/templates/[templateId]`
|
||||
- `/templates/[templateId]/edit`
|
||||
|
||||
### 5.4 Campaigns
|
||||
- `/campaigns`
|
||||
- `/campaigns/new`
|
||||
- `/campaigns/review`
|
||||
- `/campaigns/[campaignId]`
|
||||
- `/campaigns/[campaignId]/recipients`
|
||||
|
||||
Catatan:
|
||||
- `review` juga bisa jadi client-side step internal, tapi dedicated route memudahkan deep link dan QA
|
||||
|
||||
### 5.5 Team
|
||||
- `/team`
|
||||
- `/team/new`
|
||||
- `/team/[userId]`
|
||||
- `/team/[userId]/edit`
|
||||
- `/team/performance`
|
||||
|
||||
### 5.6 Reports
|
||||
- `/reports`
|
||||
- `/reports/response-time`
|
||||
- `/reports/resolution`
|
||||
- `/reports/agent-productivity`
|
||||
- `/reports/campaign-analytics`
|
||||
- `/reports/contact-growth`
|
||||
|
||||
### 5.7 Settings
|
||||
- `/settings`
|
||||
- `/settings/profile`
|
||||
- `/settings/business-hours`
|
||||
- `/settings/auto-assignment`
|
||||
- `/settings/tags`
|
||||
- `/settings/canned-responses`
|
||||
- `/settings/integrations`
|
||||
|
||||
### 5.8 Billing and Audit
|
||||
- `/billing`
|
||||
- `/billing/history`
|
||||
- `/billing/invoices/[invoiceId]`
|
||||
- `/audit-log`
|
||||
|
||||
## 6. Agent Routes
|
||||
|
||||
### 6.1 Dashboard
|
||||
- `/agent`
|
||||
|
||||
### 6.2 Inbox
|
||||
- `/agent/inbox`
|
||||
- `/agent/inbox/unassigned`
|
||||
- `/agent/inbox/mentioned`
|
||||
- `/agent/inbox/resolved`
|
||||
|
||||
Catatan:
|
||||
- seperti admin inbox, selected conversation bisa ditaruh pada query param atau nested segment
|
||||
|
||||
Alternatif eksplisit:
|
||||
- `/agent/inbox/[conversationId]`
|
||||
|
||||
### 6.3 Contacts
|
||||
- `/agent/contacts`
|
||||
- `/agent/contacts/[contactId]`
|
||||
|
||||
### 6.4 Tools and Performance
|
||||
- `/agent/quick-tools`
|
||||
- `/agent/performance`
|
||||
|
||||
## 7. Route-to-Screen Mapping
|
||||
|
||||
## 7.1 Public / Auth
|
||||
- `Login` -> `/login`
|
||||
- `Forgot Password` -> `/forgot-password`
|
||||
- `Reset Password` -> `/reset-password`
|
||||
- `Invitation Acceptance` -> `/invite/[token]`
|
||||
- `Unauthorized / Forbidden` -> `/unauthorized`
|
||||
|
||||
## 7.2 Shared User Area
|
||||
- `My Profile` -> `/profile`
|
||||
- `Edit Profile` -> `/profile/edit`
|
||||
- `Change Password` -> `/profile/change-password`
|
||||
- `Notification Center` -> `/notifications`
|
||||
- `Global Search` -> `/search`
|
||||
|
||||
## 7.3 Super Admin
|
||||
- `Super Admin Dashboard` -> `/super-admin`
|
||||
- `Tenant List` -> `/super-admin/tenants`
|
||||
- `Create Tenant` -> `/super-admin/tenants/new`
|
||||
- `Tenant Detail` -> `/super-admin/tenants/[tenantId]`
|
||||
- `Edit Tenant` -> `/super-admin/tenants/[tenantId]/edit`
|
||||
- `Connect Channel` -> `/super-admin/tenants/[tenantId]/channels/new`
|
||||
- `Channel List` -> `/super-admin/channels`
|
||||
- `Channel Detail` -> `/super-admin/channels/[channelId]`
|
||||
- `Subscription Plan Catalog` -> `/super-admin/billing/plans`
|
||||
- `Tenant Subscription List` -> `/super-admin/billing/subscriptions`
|
||||
- `Invoices List` -> `/super-admin/billing/invoices`
|
||||
- `Invoice Detail` -> `/super-admin/billing/invoices/[invoiceId]`
|
||||
- `Platform Reports` -> `/super-admin/reports`
|
||||
- `Audit Log` -> `/super-admin/audit-log`
|
||||
- `Security Events` -> `/super-admin/security-events`
|
||||
- `API / Webhook Logs` -> `/super-admin/webhook-logs`
|
||||
- `System Alerts` -> `/super-admin/alerts`
|
||||
- `Platform Settings` -> `/super-admin/settings`
|
||||
|
||||
## 7.4 Admin Client
|
||||
- `Admin Dashboard` -> `/dashboard`
|
||||
- `Shared Inbox` -> `/inbox`
|
||||
- `Contact List` -> `/contacts`
|
||||
- `Create Contact` -> `/contacts/new`
|
||||
- `Import Contacts` -> `/contacts/import`
|
||||
- `Export Contacts` -> `/contacts/export`
|
||||
- `Segments / Lists` -> `/contacts/segments`
|
||||
- `Create Segment` -> `/contacts/segments/new`
|
||||
- `Segment Detail` -> `/contacts/segments/[segmentId]`
|
||||
- `Contact Detail` -> `/contacts/[contactId]`
|
||||
- `Edit Contact` -> `/contacts/[contactId]/edit`
|
||||
- `Template List` -> `/templates`
|
||||
- `Create Template Request` -> `/templates/new`
|
||||
- `Template Detail` -> `/templates/[templateId]`
|
||||
- `Edit / Resubmit Template` -> `/templates/[templateId]/edit`
|
||||
- `Campaign List` -> `/campaigns`
|
||||
- `Create Campaign` -> `/campaigns/new`
|
||||
- `Campaign Review` -> `/campaigns/review`
|
||||
- `Campaign Detail` -> `/campaigns/[campaignId]`
|
||||
- `Campaign Recipients` -> `/campaigns/[campaignId]/recipients`
|
||||
- `Team / Users List` -> `/team`
|
||||
- `Create User` -> `/team/new`
|
||||
- `User Detail` -> `/team/[userId]`
|
||||
- `Edit User` -> `/team/[userId]/edit`
|
||||
- `Team Performance` -> `/team/performance`
|
||||
- `Reports Overview` -> `/reports`
|
||||
- `Response Time Report` -> `/reports/response-time`
|
||||
- `Resolution Report` -> `/reports/resolution`
|
||||
- `Agent Productivity Report` -> `/reports/agent-productivity`
|
||||
- `Campaign Analytics Report` -> `/reports/campaign-analytics`
|
||||
- `Contact Growth Report` -> `/reports/contact-growth`
|
||||
- `Tenant Settings` -> `/settings`
|
||||
- `Tenant Profile Settings` -> `/settings/profile`
|
||||
- `Business Hours Settings` -> `/settings/business-hours`
|
||||
- `Auto Assignment Rules` -> `/settings/auto-assignment`
|
||||
- `Chat Tags Management` -> `/settings/tags`
|
||||
- `Canned Responses` -> `/settings/canned-responses`
|
||||
- `Webhook / Integration Settings` -> `/settings/integrations`
|
||||
- `Billing & Subscription` -> `/billing`
|
||||
- `Billing History` -> `/billing/history`
|
||||
- `Invoice Detail` -> `/billing/invoices/[invoiceId]`
|
||||
- `Tenant Audit Log` -> `/audit-log`
|
||||
|
||||
## 7.5 Agent
|
||||
- `Agent Dashboard` -> `/agent`
|
||||
- `My Inbox` -> `/agent/inbox`
|
||||
- `Unassigned Queue` -> `/agent/inbox/unassigned`
|
||||
- `Mentioned Conversations` -> `/agent/inbox/mentioned`
|
||||
- `Resolved History` -> `/agent/inbox/resolved`
|
||||
- `Agent Contact List` -> `/agent/contacts`
|
||||
- `Agent Contact Detail` -> `/agent/contacts/[contactId]`
|
||||
- `Quick Tools` -> `/agent/quick-tools`
|
||||
- `My Performance` -> `/agent/performance`
|
||||
|
||||
## 8. Query Params yang Disarankan
|
||||
|
||||
Untuk mengurangi jumlah route berlebihan, beberapa state lebih cocok di query params:
|
||||
|
||||
### 8.1 Inbox
|
||||
- `/inbox?tab=unassigned`
|
||||
- `/inbox?conversationId=conv_123`
|
||||
- `/inbox?status=open&assigned=me`
|
||||
|
||||
### 8.2 Reports
|
||||
- `/reports/response-time?from=2026-04-01&to=2026-04-30`
|
||||
- `/reports/agent-productivity?agentId=user_123`
|
||||
|
||||
### 8.3 Campaign Recipients
|
||||
- `/campaigns/[campaignId]/recipients?status=failed`
|
||||
|
||||
## 9. Route Guards yang Diperlukan
|
||||
|
||||
### 9.1 Public Guard
|
||||
- redirect logged-in user away from auth pages jika perlu
|
||||
|
||||
### 9.2 Auth Guard
|
||||
- semua route di `(app)` harus login
|
||||
|
||||
### 9.3 Role Guard
|
||||
- `super_admin` hanya boleh akses `/super-admin/*`
|
||||
- `admin_client` hanya boleh akses tenant admin area
|
||||
- `agent` hanya boleh akses agent area + profile routes
|
||||
|
||||
### 9.4 Tenant Guard
|
||||
- semua query dan data di tenant area wajib tenant-scoped
|
||||
|
||||
## 10. Rekomendasi Layout Files
|
||||
|
||||
```text
|
||||
app/
|
||||
(public)/layout.tsx
|
||||
(app)/layout.tsx
|
||||
(app)/(super-admin)/super-admin/layout.tsx
|
||||
(app)/(tenant-admin)/layout.tsx
|
||||
(app)/(agent)/agent/layout.tsx
|
||||
```
|
||||
|
||||
Manfaat:
|
||||
- sidebar/topbar bisa dibedakan per role
|
||||
- akses kontrol lebih rapi
|
||||
- shell UI tidak berulang
|
||||
Reference in New Issue
Block a user