refactor: Rename DashboardWidgets to Widgets for dynamic dashboard (#97)

- Rename DashboardWidget model to Widget with table name 'widgets'
- Update handler methods: ListWidgets, GetWidget, CreateWidget, etc.
- Change API routes from /api/dashboard/widgets to /api/widgets
- Rename frontend service from dashboardWidgetsService to widgetsService
- Update test utilities and test files accordingly
- Add grid-layout-plus dependency for dashboard layout

Author: shridarpatil

cmd/whatomate/main.go

@@ -604,16 +604,16 @@ 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)
+	// Widgets (customizable analytics)
+	g.GET("/api/widgets", app.ListWidgets)
+	g.POST("/api/widgets", app.CreateWidget)
+	g.GET("/api/widgets/data-sources", app.GetWidgetDataSources)
+	g.GET("/api/widgets/data", app.GetAllWidgetsData)
+	g.GET("/api/widgets/{id}", app.GetWidget)
+	g.PUT("/api/widgets/{id}", app.UpdateWidget)
+	g.DELETE("/api/widgets/{id}", app.DeleteWidget)
+	g.GET("/api/widgets/{id}/data", app.GetWidgetData)
+	g.POST("/api/widgets/layout", app.SaveWidgetLayout)
 
 	// Organization Settings
 	g.GET("/api/org/settings", app.GetOrganizationSettings)

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

@@ -41,15 +41,16 @@ test.describe('Dashboard', () => {
     await expect(page.locator('button[role="combobox"]').first()).toContainText('Last 7 days')
   })
 
-  test('should display recent messages section', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'Recent Messages' })).toBeVisible()
+  test('should display recent messages widget', async ({ page }) => {
+    // Widget names are displayed in spans, not headings
+    await expect(page.getByText('Recent Messages', { exact: true })).toBeVisible({ timeout: 15000 })
     await expect(page.getByText('Latest conversations from your contacts')).toBeVisible()
   })
 
-  test('should display quick actions section', async ({ page }) => {
+  test('should display quick actions widget', async ({ page }) => {
     const main = page.locator('main')
-    await expect(main.locator('text=Quick Actions')).toBeVisible()
-    await expect(main.locator('text=Common tasks and shortcuts')).toBeVisible()
+    await expect(main.getByText('Quick Actions', { exact: true })).toBeVisible({ timeout: 15000 })
+    await expect(main.getByText('Common tasks and shortcuts')).toBeVisible()
 
     // Check for quick action links - scope to main to avoid sidebar duplicates
     await expect(main.locator('a[href="/chat"]')).toBeVisible()

frontend/package-lock.json

@@ -26,6 +26,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "dompurify": "^3.3.1",
+    "grid-layout-plus": "^1.1.1",
     "lucide-vue-next": "^0.303.0",
     "pinia": "^2.1.7",
     "reka-ui": "^2.7.0",

frontend/package.json

@@ -328,6 +328,11 @@ export interface DashboardWidget {
   color: string
   size: string
   display_order: number
+  grid_x: number
+  grid_y: number
+  grid_w: number
+  grid_h: number
+  config: Record<string, any>
   is_shared: boolean
   is_default: boolean
   is_owner: boolean
@@ -347,6 +352,14 @@ export interface WidgetData {
     labels: string[]
     datasets: Array<{ label: string; data: number[] }>
   }
+  table_rows?: Array<{
+    id: string
+    label: string
+    sub_label: string
+    status: string
+    direction?: string
+    created_at: string
+  }>
 }
 
 export interface DataSourceInfo {
@@ -355,9 +368,17 @@ export interface DataSourceInfo {
   fields: string[]
 }
 
-export const dashboardWidgetsService = {
-  list: () => api.get<{ widgets: DashboardWidget[] }>('/dashboard/widgets'),
-  get: (id: string) => api.get<DashboardWidget>(`/dashboard/widgets/${id}`),
+export interface LayoutItem {
+  id: string
+  grid_x: number
+  grid_y: number
+  grid_w: number
+  grid_h: number
+}
+
+export const widgetsService = {
+  list: () => api.get<{ widgets: DashboardWidget[] }>('/widgets'),
+  get: (id: string) => api.get<DashboardWidget>(`/widgets/${id}`),
   create: (data: {
     name: string
     description?: string
@@ -371,8 +392,9 @@ export const dashboardWidgetsService = {
     show_change?: boolean
     color?: string
     size?: string
+    config?: Record<string, any>
     is_shared?: boolean
-  }) => api.post<DashboardWidget>('/dashboard/widgets', data),
+  }) => api.post<DashboardWidget>('/widgets', data),
   update: (id: string, data: Partial<{
     name: string
     description: string
@@ -386,21 +408,22 @@ export const dashboardWidgetsService = {
     show_change: boolean
     color: string
     size: string
+    config: Record<string, any>
     is_shared: boolean
-  }>) => api.put<DashboardWidget>(`/dashboard/widgets/${id}`, data),
-  delete: (id: string) => api.delete(`/dashboard/widgets/${id}`),
+  }>) => api.put<DashboardWidget>(`/widgets/${id}`, data),
+  delete: (id: string) => api.delete(`/widgets/${id}`),
   getData: (id: string, params?: { from?: string; to?: string }) =>
-    api.get<WidgetData>(`/dashboard/widgets/${id}/data`, { params }),
+    api.get<WidgetData>(`/widgets/${id}/data`, { params }),
   getAllData: (params?: { from?: string; to?: string }) =>
-    api.get<{ data: Record<string, WidgetData> }>('/dashboard/widgets/data', { params }),
+    api.get<{ data: Record<string, WidgetData> }>('/widgets/data', { params }),
   getDataSources: () => api.get<{
     data_sources: DataSourceInfo[]
     metrics: string[]
     display_types: string[]
     operators: Array<{ value: string; label: string }>
-  }>('/dashboard/widgets/data-sources'),
-  reorder: (widgetIds: string[]) =>
-    api.post('/dashboard/widgets/reorder', { widget_ids: widgetIds })
+  }>('/widgets/data-sources'),
+  saveLayout: (layout: LayoutItem[]) =>
+    api.post('/widgets/layout', { layout })
 }
 
 export const organizationService = {