# 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