feat: Customizable dashboard widgets with permission-based access control (#66)

* feat: Add customizable dashboard widgets

Allow users to create their own analytics widgets on the dashboard
instead of predefined metrics. This enables different users/organizations
to track what matters most to them.

- Add DashboardWidget model with flexible filter configuration (JSONB)
- Add CRUD API handlers for widgets with owner-only edit/delete
- Add widget data query endpoint supporting multiple data sources
- Support for messages, contacts, campaigns, transfers, sessions data
- Update DashboardView with widget builder dialog
- Add shared widget support for team visibility
- Include percentage change comparison with previous period

* fix: Restore default stat widgets and fix data source dropdown

- Add back the 4 default stat cards (Total Messages, Active Contacts,
  Chatbot Sessions, Total Campaigns) that are always shown
- Fix data source dropdown not showing options by handling the
  API response envelope correctly
- Custom widgets now appear in a separate section below defaults
- Both default stats and custom widgets update with date range changes

* feat: Add permission-based access control for dashboard widgets

- Add analytics:write and analytics:delete permissions
- Dashboard widget CRUD requires appropriate analytics permissions
- Only widget owner can edit/delete their widgets
- Super admin can edit system role permissions via UI
- Fix migration to seed missing permissions incrementally
- Use super admin (admin@admin.com) for default widget ownership
- Add comprehensive tests for widget permission checks

* fix: Hide widget buttons based on user permissions

- Add permission checks to DashboardView
- Hide "Add Widget" button if user lacks analytics:write
- Hide edit button if user lacks analytics:write
- Hide delete button if user lacks analytics:delete

* test: Add e2e tests for dashboard widget permissions

- Test admin user can see Add Widget, edit, delete buttons
- Test user with analytics:write can see Add Widget and edit
- Test user with analytics:delete can see delete button
- Test user with only analytics:read cannot see any action buttons
- Test user with full analytics permissions sees all controls

* fix: Update dashboard e2e tests for new widget names

- Update dashboard description text assertion
- Fix stat card names to match new widget names
- Use getByRole for Recent Messages heading to avoid ambiguity

* fix: Filter contacts widget by last_message_at for active contacts

Active Contacts widget should show contacts with recent message
activity, not contacts created within the date range.

* chore: Remove debug console.log statements from DashboardView

Clean up debug logging that was added during development.

Author: shridarpatil

cmd/whatomate/main.go

@@ -604,6 +604,17 @@ func setupRoutes(g *fastglue.Fastglue, app *handlers.App, lo logf.Logger, basePa
 	g.GET("/api/analytics/agents/{id}", app.GetAgentDetails)
 	g.GET("/api/analytics/agents/comparison", app.GetAgentComparison)
 
+	// Dashboard Widgets (customizable analytics)
+	g.GET("/api/dashboard/widgets", app.ListDashboardWidgets)
+	g.POST("/api/dashboard/widgets", app.CreateDashboardWidget)
+	g.GET("/api/dashboard/widgets/data-sources", app.GetWidgetDataSources)
+	g.GET("/api/dashboard/widgets/data", app.GetAllWidgetsData)
+	g.GET("/api/dashboard/widgets/{id}", app.GetDashboardWidget)
+	g.PUT("/api/dashboard/widgets/{id}", app.UpdateDashboardWidget)
+	g.DELETE("/api/dashboard/widgets/{id}", app.DeleteDashboardWidget)
+	g.GET("/api/dashboard/widgets/{id}/data", app.GetWidgetData)
+	g.POST("/api/dashboard/widgets/reorder", app.ReorderDashboardWidgets)
+
 	// Organization Settings
 	g.GET("/api/org/settings", app.GetOrganizationSettings)
 	g.PUT("/api/org/settings", app.UpdateOrganizationSettings)

frontend/e2e/tests/dashboard/dashboard-permissions.spec.ts

@@ -0,0 +1,361 @@
+import { test, expect, Page } from '@playwright/test'
+import { loginAsAdmin, ApiHelper, generateUniqueName, generateUniqueEmail } from '../../helpers'
+
+// Helper to login with specific credentials
+async function loginWithCredentials(page: Page, email: string, password: string) {
+  await page.goto('/login')
+  await page.locator('input[name="email"], input[type="email"]').fill(email)
+  await page.locator('input[name="password"], input[type="password"]').fill(password)
+  await page.locator('button[type="submit"]').click()
+  await page.waitForURL((url) => !url.pathname.includes('/login'), { timeout: 10000 })
+}
+
+test.describe('Dashboard Widget Permissions', () => {
+  test.describe('Admin User (with full permissions)', () => {
+    test.beforeEach(async ({ page }) => {
+      await loginAsAdmin(page)
+      await page.goto('/')
+      await page.waitForLoadState('networkidle')
+    })
+
+    test('admin can see Add Widget button', async ({ page }) => {
+      const addButton = page.locator('button').filter({ hasText: /Add Widget/i })
+      await expect(addButton).toBeVisible({ timeout: 10000 })
+    })
+
+    test('admin can see edit and delete buttons on widget hover', async ({ page }) => {
+      // Wait for widgets to load
+      await page.waitForSelector('.card-depth', { timeout: 10000 })
+
+      // Hover over first widget
+      const firstWidget = page.locator('.card-depth').first()
+      await firstWidget.hover()
+
+      // Should see edit button (pencil icon)
+      const editButton = firstWidget.locator('button[title="Edit widget"]')
+      await expect(editButton).toBeVisible()
+
+      // Should see delete button (trash icon)
+      const deleteButton = firstWidget.locator('button[title="Delete widget"]')
+      await expect(deleteButton).toBeVisible()
+    })
+  })
+
+  test.describe('User with Analytics Write Permission', () => {
+    const roleName = generateUniqueName('E2E Analytics Write')
+    const userEmail = generateUniqueEmail('e2e-analytics-write')
+    const userPassword = 'Password123!'
+
+    let api: ApiHelper
+    let roleId: string
+    let userId: string
+
+    test.beforeAll(async ({ request }) => {
+      api = new ApiHelper(request)
+      await api.loginAsAdmin()
+
+      // Create role with analytics read and write permissions
+      const permissions = await api.findPermissionKeys([
+        { resource: 'analytics', action: 'read' },
+        { resource: 'analytics', action: 'write' },
+      ])
+
+      const role = await api.createRole({
+        name: roleName,
+        description: 'E2E test role with analytics write permission',
+        permissions,
+      })
+      roleId = role.id
+
+      // Create user with the custom role
+      const user = await api.createUser({
+        email: userEmail,
+        password: userPassword,
+        full_name: 'E2E Analytics Write User',
+        role_id: roleId,
+      })
+      userId = user.id
+    })
+
+    test.afterAll(async () => {
+      if (userId) await api.deleteUser(userId).catch(() => {})
+      if (roleId) await api.deleteRole(roleId).catch(() => {})
+    })
+
+    test('user with analytics:write can see Add Widget button', async ({ page }) => {
+      await loginWithCredentials(page, userEmail, userPassword)
+      await page.goto('/')
+      await page.waitForLoadState('networkidle')
+
+      const addButton = page.locator('button').filter({ hasText: /Add Widget/i })
+      await expect(addButton).toBeVisible({ timeout: 10000 })
+    })
+
+    test('user with analytics:write can see edit button on widget hover', async ({ page }) => {
+      await loginWithCredentials(page, userEmail, userPassword)
+      await page.goto('/')
+      await page.waitForLoadState('networkidle')
+
+      // Wait for widgets to load
+      await page.waitForSelector('.card-depth', { timeout: 10000 })
+
+      // Hover over first widget
+      const firstWidget = page.locator('.card-depth').first()
+      await firstWidget.hover()
+
+      // Should see edit button
+      const editButton = firstWidget.locator('button[title="Edit widget"]')
+      await expect(editButton).toBeVisible()
+    })
+  })
+
+  test.describe('User with Analytics Delete Permission', () => {
+    const roleName = generateUniqueName('E2E Analytics Delete')
+    const userEmail = generateUniqueEmail('e2e-analytics-delete')
+    const userPassword = 'Password123!'
+
+    let api: ApiHelper
+    let roleId: string
+    let userId: string
+
+    test.beforeAll(async ({ request }) => {
+      api = new ApiHelper(request)
+      await api.loginAsAdmin()
+
+      // Create role with analytics read and delete permissions (but NOT write)
+      const permissions = await api.findPermissionKeys([
+        { resource: 'analytics', action: 'read' },
+        { resource: 'analytics', action: 'delete' },
+      ])
+
+      const role = await api.createRole({
+        name: roleName,
+        description: 'E2E test role with analytics delete permission',
+        permissions,
+      })
+      roleId = role.id
+
+      // Create user with the custom role
+      const user = await api.createUser({
+        email: userEmail,
+        password: userPassword,
+        full_name: 'E2E Analytics Delete User',
+        role_id: roleId,
+      })
+      userId = user.id
+    })
+
+    test.afterAll(async () => {
+      if (userId) await api.deleteUser(userId).catch(() => {})
+      if (roleId) await api.deleteRole(roleId).catch(() => {})
+    })
+
+    test('user with analytics:delete can see delete button on widget hover', async ({ page }) => {
+      await loginWithCredentials(page, userEmail, userPassword)
+      await page.goto('/')
+      await page.waitForLoadState('networkidle')
+
+      // Wait for widgets to load
+      await page.waitForSelector('.card-depth', { timeout: 10000 })
+
+      // Hover over first widget
+      const firstWidget = page.locator('.card-depth').first()
+      await firstWidget.hover()
+
+      // Should see delete button
+      const deleteButton = firstWidget.locator('button[title="Delete widget"]')
+      await expect(deleteButton).toBeVisible()
+    })
+
+    test('user with analytics:delete but NOT analytics:write cannot see Add Widget button', async ({ page }) => {
+      await loginWithCredentials(page, userEmail, userPassword)
+      await page.goto('/')
+      await page.waitForLoadState('networkidle')
+
+      const addButton = page.locator('button').filter({ hasText: /Add Widget/i })
+      await expect(addButton).not.toBeVisible()
+    })
+
+    test('user with analytics:delete but NOT analytics:write cannot see edit button', async ({ page }) => {
+      await loginWithCredentials(page, userEmail, userPassword)
+      await page.goto('/')
+      await page.waitForLoadState('networkidle')
+
+      // Wait for widgets to load
+      await page.waitForSelector('.card-depth', { timeout: 10000 })
+
+      // Hover over first widget
+      const firstWidget = page.locator('.card-depth').first()
+      await firstWidget.hover()
+
+      // Should NOT see edit button
+      const editButton = firstWidget.locator('button[title="Edit widget"]')
+      await expect(editButton).not.toBeVisible()
+    })
+  })
+
+  test.describe('User with Analytics Read Only', () => {
+    const roleName = generateUniqueName('E2E Analytics Read Only')
+    const userEmail = generateUniqueEmail('e2e-analytics-readonly')
+    const userPassword = 'Password123!'
+
+    let api: ApiHelper
+    let roleId: string
+    let userId: string
+
+    test.beforeAll(async ({ request }) => {
+      api = new ApiHelper(request)
+      await api.loginAsAdmin()
+
+      // Create role with only analytics read permission
+      const permissions = await api.findPermissionKeys([
+        { resource: 'analytics', action: 'read' },
+      ])
+
+      const role = await api.createRole({
+        name: roleName,
+        description: 'E2E test role with analytics read-only permission',
+        permissions,
+      })
+      roleId = role.id
+
+      // Create user with the custom role
+      const user = await api.createUser({
+        email: userEmail,
+        password: userPassword,
+        full_name: 'E2E Analytics Read Only User',
+        role_id: roleId,
+      })
+      userId = user.id
+    })
+
+    test.afterAll(async () => {
+      if (userId) await api.deleteUser(userId).catch(() => {})
+      if (roleId) await api.deleteRole(roleId).catch(() => {})
+    })
+
+    test('user with only analytics:read cannot see Add Widget button', async ({ page }) => {
+      await loginWithCredentials(page, userEmail, userPassword)
+      await page.goto('/')
+      await page.waitForLoadState('networkidle')
+
+      const addButton = page.locator('button').filter({ hasText: /Add Widget/i })
+      await expect(addButton).not.toBeVisible()
+    })
+
+    test('user with only analytics:read cannot see edit button on widget hover', async ({ page }) => {
+      await loginWithCredentials(page, userEmail, userPassword)
+      await page.goto('/')
+      await page.waitForLoadState('networkidle')
+
+      // Wait for widgets to load
+      await page.waitForSelector('.card-depth', { timeout: 10000 })
+
+      // Hover over first widget
+      const firstWidget = page.locator('.card-depth').first()
+      await firstWidget.hover()
+
+      // Should NOT see edit button
+      const editButton = firstWidget.locator('button[title="Edit widget"]')
+      await expect(editButton).not.toBeVisible()
+    })
+
+    test('user with only analytics:read cannot see delete button on widget hover', async ({ page }) => {
+      await loginWithCredentials(page, userEmail, userPassword)
+      await page.goto('/')
+      await page.waitForLoadState('networkidle')
+
+      // Wait for widgets to load
+      await page.waitForSelector('.card-depth', { timeout: 10000 })
+
+      // Hover over first widget
+      const firstWidget = page.locator('.card-depth').first()
+      await firstWidget.hover()
+
+      // Should NOT see delete button
+      const deleteButton = firstWidget.locator('button[title="Delete widget"]')
+      await expect(deleteButton).not.toBeVisible()
+    })
+
+    test('user with only analytics:read can still view dashboard and widgets', async ({ page }) => {
+      await loginWithCredentials(page, userEmail, userPassword)
+      await page.goto('/')
+      await page.waitForLoadState('networkidle')
+
+      // Should see dashboard
+      await expect(page.locator('h1')).toContainText('Dashboard')
+
+      // Should see widgets
+      await page.waitForSelector('.card-depth', { timeout: 10000 })
+      const widgets = page.locator('.card-depth')
+      expect(await widgets.count()).toBeGreaterThan(0)
+    })
+  })
+
+  test.describe('User with Full Analytics Permissions', () => {
+    const roleName = generateUniqueName('E2E Analytics Full')
+    const userEmail = generateUniqueEmail('e2e-analytics-full')
+    const userPassword = 'Password123!'
+
+    let api: ApiHelper
+    let roleId: string
+    let userId: string
+
+    test.beforeAll(async ({ request }) => {
+      api = new ApiHelper(request)
+      await api.loginAsAdmin()
+
+      // Create role with all analytics permissions
+      const permissions = await api.findPermissionKeys([
+        { resource: 'analytics', action: 'read' },
+        { resource: 'analytics', action: 'write' },
+        { resource: 'analytics', action: 'delete' },
+      ])
+
+      const role = await api.createRole({
+        name: roleName,
+        description: 'E2E test role with full analytics permissions',
+        permissions,
+      })
+      roleId = role.id
+
+      // Create user with the custom role
+      const user = await api.createUser({
+        email: userEmail,
+        password: userPassword,
+        full_name: 'E2E Analytics Full User',
+        role_id: roleId,
+      })
+      userId = user.id
+    })
+
+    test.afterAll(async () => {
+      if (userId) await api.deleteUser(userId).catch(() => {})
+      if (roleId) await api.deleteRole(roleId).catch(() => {})
+    })
+
+    test('user with full analytics permissions can see all widget controls', async ({ page }) => {
+      await loginWithCredentials(page, userEmail, userPassword)
+      await page.goto('/')
+      await page.waitForLoadState('networkidle')
+
+      // Should see Add Widget button
+      const addButton = page.locator('button').filter({ hasText: /Add Widget/i })
+      await expect(addButton).toBeVisible({ timeout: 10000 })
+
+      // Wait for widgets to load
+      await page.waitForSelector('.card-depth', { timeout: 10000 })
+
+      // Hover over first widget
+      const firstWidget = page.locator('.card-depth').first()
+      await firstWidget.hover()
+
+      // Should see both edit and delete buttons
+      const editButton = firstWidget.locator('button[title="Edit widget"]')
+      await expect(editButton).toBeVisible()
+
+      const deleteButton = firstWidget.locator('button[title="Delete widget"]')
+      await expect(deleteButton).toBeVisible()
+    })
+  })
+})