wirabasalamah/whatsapp-inbox-platform
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity
Files
1abd89907c2f29ba3eed1f7b567df79b29246933
whatsapp-inbox-platform/route-map-nextjs-whatsapp-inbox.md
Wira Basalamah adde003fba
Some checks failed
CI - Production Readiness / Verify (push) Has been cancelled
Details
chore: initial project import
2026-04-21 09:29:29 +07:00

403 lines
11 KiB
Markdown
Raw Blame History

# 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 View Git Blame Copy Permalink