From 05d47931be4af2e17c22c5e3b1c09c57c42cee4a Mon Sep 17 00:00:00 2001
From: Gabriel Jablonski <gabriel@fazer.ai>
Date: Thu, 12 Mar 2026 15:31:53 -0300
Subject: [PATCH] feat: add kanban feature promotion with upgrade banner (#235)

* feat: add kanban feature promotion with upgrade banner

Add a Kanban sidebar item visible to all users that shows a locked
feature promotion page. Super admins see an upgrade button linking to
fazer.ai, while non-admins see a message to contact their administrator.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: allow custom_role users to access kanban promotion page

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components-next/sidebar/Sidebar.vue       |  7 ++
 .../dashboard/i18n/locale/en/index.js         |  2 +
 .../dashboard/i18n/locale/en/kanban.json      | 11 ++++
 .../dashboard/i18n/locale/en/settings.json    |  1 +
 .../dashboard/i18n/locale/pt_BR/index.js      |  2 +
 .../dashboard/i18n/locale/pt_BR/kanban.json   | 11 ++++
 .../dashboard/i18n/locale/pt_BR/settings.json |  1 +
 .../routes/dashboard/dashboard.routes.js      |  2 +
 .../routes/dashboard/kanban/Index.vue         | 65 +++++++++++++++++++
 .../routes/dashboard/kanban/kanban.routes.js  | 15 +++++
 10 files changed, 117 insertions(+)
 create mode 100644 app/javascript/dashboard/i18n/locale/en/kanban.json
 create mode 100644 app/javascript/dashboard/i18n/locale/pt_BR/kanban.json
 create mode 100644 app/javascript/dashboard/routes/dashboard/kanban/Index.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/kanban/kanban.routes.js

diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
index a4a63ea18..5fdd58ae6 100644
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -317,6 +317,13 @@ const menuItems = computed(() => {
         },
       ],
     },
+    {
+      name: 'Kanban',
+      label: t('SIDEBAR.KANBAN'),
+      icon: 'i-lucide-columns-3',
+      to: accountScopedRoute('kanban_view'),
+      activeOn: ['kanban_view'],
+    },
     {
       name: 'Captain',
       icon: 'i-woot-captain',
diff --git a/app/javascript/dashboard/i18n/locale/en/index.js b/app/javascript/dashboard/i18n/locale/en/index.js
index a55f54165..98982e6bb 100644
--- a/app/javascript/dashboard/i18n/locale/en/index.js
+++ b/app/javascript/dashboard/i18n/locale/en/index.js
@@ -24,6 +24,7 @@ import inbox from './inbox.json';
 import inboxMgmt from './inboxMgmt.json';
 import integrationApps from './integrationApps.json';
 import integrations from './integrations.json';
+import kanban from './kanban.json';
 import labelsMgmt from './labelsMgmt.json';
 import login from './login.json';
 import macros from './macros.json';
@@ -67,6 +68,7 @@ export default {
   ...inboxMgmt,
   ...integrationApps,
   ...integrations,
+  ...kanban,
   ...labelsMgmt,
   ...login,
   ...macros,
diff --git a/app/javascript/dashboard/i18n/locale/en/kanban.json b/app/javascript/dashboard/i18n/locale/en/kanban.json
new file mode 100644
index 000000000..350cff76e
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/en/kanban.json
@@ -0,0 +1,11 @@
+{
+  "KANBAN": {
+    "PAYWALL": {
+      "TITLE": "Upgrade to use Kanban",
+      "DESCRIPTION": "The Kanban feature requires a fazer.ai Chatwoot Pro subscription.",
+      "UPGRADE_PROMPT": "Subscribe to fazer.ai Chatwoot Pro to access Kanban funnels, task management, and workflow automation.",
+      "NON_ADMIN_MESSAGE": "The Kanban feature is not available on your current plan. Please reach out to your administrator to upgrade.",
+      "UPGRADE_NOW": "Upgrade now"
+    }
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index 4893f2fa2..4dfda72cd 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -338,6 +338,7 @@
     "ACTIVE": "Active",
     "COMPANIES": "Companies",
     "ALL_COMPANIES": "All Companies",
+    "KANBAN": "Kanban",
     "CAPTAIN": "Captain",
     "CAPTAIN_ASSISTANTS": "Assistants",
     "CAPTAIN_DOCUMENTS": "Documents",
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/index.js b/app/javascript/dashboard/i18n/locale/pt_BR/index.js
index 213387d0c..7a1f910f4 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/index.js
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/index.js
@@ -23,6 +23,7 @@ import inbox from './inbox.json';
 import inboxMgmt from './inboxMgmt.json';
 import integrationApps from './integrationApps.json';
 import integrations from './integrations.json';
+import kanban from './kanban.json';
 import labelsMgmt from './labelsMgmt.json';
 import login from './login.json';
 import macros from './macros.json';
@@ -62,6 +63,7 @@ export default {
   ...inboxMgmt,
   ...integrationApps,
   ...integrations,
+  ...kanban,
   ...labelsMgmt,
   ...login,
   ...macros,
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/kanban.json b/app/javascript/dashboard/i18n/locale/pt_BR/kanban.json
new file mode 100644
index 000000000..322bb0381
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/kanban.json
@@ -0,0 +1,11 @@
+{
+  "KANBAN": {
+    "PAYWALL": {
+      "TITLE": "Faça upgrade para usar o Kanban",
+      "DESCRIPTION": "O recurso Kanban requer uma assinatura Chatwoot Pro fazer.ai.",
+      "UPGRADE_PROMPT": "Assine o Chatwoot Pro fazer.ai para acessar funis Kanban, gerenciamento de tarefas e automação de fluxo de trabalho.",
+      "NON_ADMIN_MESSAGE": "O recurso Kanban não está disponível no seu plano atual. Entre em contato com o administrador para fazer o upgrade.",
+      "UPGRADE_NOW": "Fazer upgrade"
+    }
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/settings.json b/app/javascript/dashboard/i18n/locale/pt_BR/settings.json
index ae5245969..e6861c257 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/settings.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/settings.json
@@ -337,6 +337,7 @@
     "ACTIVE": "Ativo",
     "COMPANIES": "Empresas",
     "ALL_COMPANIES": "Todas as empresas",
+    "KANBAN": "Kanban",
     "CAPTAIN": "Capitão",
     "CAPTAIN_ASSISTANTS": "Assistentes",
     "CAPTAIN_DOCUMENTS": "Documentos",
diff --git a/app/javascript/dashboard/routes/dashboard/dashboard.routes.js b/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
index 2bceff7f9..25c035107 100644
--- a/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
@@ -9,6 +9,7 @@ import { frontendURL } from '../../helper/URLHelper';
 import helpcenterRoutes from './helpcenter/helpcenter.routes';
 import campaignsRoutes from './campaigns/campaigns.routes';
 import { routes as captainRoutes } from './captain/captain.routes';
+import { routes as kanbanRoutes } from './kanban/kanban.routes';
 import dashboardAppsRoutes from './dashboardApps/dashboardApps.routes';
 import AppContainer from './Dashboard.vue';
 import Suspended from './suspended/Index.vue';
@@ -21,6 +22,7 @@ export default {
       component: AppContainer,
       children: [
         ...captainRoutes,
+        ...kanbanRoutes,
         ...inboxRoutes,
         ...conversation.routes,
         ...settings.routes,
diff --git a/app/javascript/dashboard/routes/dashboard/kanban/Index.vue b/app/javascript/dashboard/routes/dashboard/kanban/Index.vue
new file mode 100644
index 000000000..1ae9262d7
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/kanban/Index.vue
@@ -0,0 +1,65 @@
+<script setup>
+import { computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store.js';
+import { useI18n } from 'vue-i18n';
+
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const { t } = useI18n();
+
+const currentUser = useMapGetter('getCurrentUser');
+
+const isSuperAdmin = computed(() => {
+  return currentUser.value.type === 'SuperAdmin';
+});
+
+const upgradeUrl = 'https://fazer.ai/kanban';
+</script>
+
+<template>
+  <section
+    class="flex flex-col items-center justify-center w-full h-full bg-n-surface-1"
+  >
+    <div
+      class="flex flex-col max-w-md px-6 py-6 border shadow bg-n-solid-1 rounded-xl border-n-weak"
+    >
+      <div class="flex items-center w-full gap-2 mb-4">
+        <span
+          class="flex items-center justify-center w-6 h-6 rounded-full bg-n-solid-blue"
+        >
+          <Icon
+            class="flex-shrink-0 text-n-brand size-[14px]"
+            icon="i-lucide-lock-keyhole"
+          />
+        </span>
+        <span class="text-base font-medium text-n-slate-12">
+          {{ t('KANBAN.PAYWALL.TITLE') }}
+        </span>
+      </div>
+      <template v-if="isSuperAdmin">
+        <p class="mb-3 text-sm font-normal text-n-slate-11">
+          {{ t('KANBAN.PAYWALL.DESCRIPTION') }}
+        </p>
+        <p class="mb-4 text-sm font-normal text-n-slate-11">
+          {{ t('KANBAN.PAYWALL.UPGRADE_PROMPT') }}
+        </p>
+      </template>
+      <template v-else>
+        <p class="mb-4 text-sm font-normal text-n-slate-11">
+          {{ t('KANBAN.PAYWALL.NON_ADMIN_MESSAGE') }}
+        </p>
+      </template>
+      <a
+        v-if="isSuperAdmin"
+        :href="upgradeUrl"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <Button solid blue md class="w-full">
+          {{ t('KANBAN.PAYWALL.UPGRADE_NOW') }}
+        </Button>
+      </a>
+    </div>
+  </section>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/kanban/kanban.routes.js b/app/javascript/dashboard/routes/dashboard/kanban/kanban.routes.js
new file mode 100644
index 000000000..9c20d1612
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/kanban/kanban.routes.js
@@ -0,0 +1,15 @@
+import { frontendURL } from '../../../helper/URLHelper';
+import KanbanIndex from './Index.vue';
+
+const meta = {
+  permissions: ['administrator', 'agent', 'custom_role'],
+};
+
+export const routes = [
+  {
+    path: frontendURL('accounts/:accountId/kanban'),
+    component: KanbanIndex,
+    name: 'kanban_view',
+    meta,
+  },
+];