# 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
