wirabasalamah/whatsapp-inbox-platform
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity
Files
f48c87e36d671525b3571662322793c3094f8d2a
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

11 KiB
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

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

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