Dashboard Customization
ProBeya's dashboard uses a responsive grid layout that you can customize by rearranging, resizing, and configuring widgets to match your workflow.
Overview
The organization dashboard displays aggregated analytics: item counts, status distributions, priority breakdowns, overdue tasks, KPI summaries, action summaries, and more. Each user can arrange these widgets differently, and the layout is saved per user per organization. This means you can have different dashboard arrangements for different organizations without interference.
Getting Started
- Open the Dashboard from the main navigation.
- Hover over any widget to reveal drag handles.
- Drag widgets to reposition them on the grid.
- Resize widgets by dragging their edges or corners.
- Your layout is automatically saved after each change.
How It Works
Widget Grid
The dashboard uses a responsive grid system (powered by react-grid-layout) with breakpoints for different screen sizes:
| Breakpoint | Label | Typical Use |
|---|---|---|
| lg | Large | Desktop monitors (1200px+) |
| md | Medium | Laptops (996px+) |
| sm | Small | Tablets (768px+) |
| xs | Extra small | Large phones (480px+) |
| xxs | Smallest | Small phones (<480px) |
Each breakpoint stores its own layout, so widgets rearrange appropriately as the browser window changes size.
Widget Properties
Each widget in the grid has:
- Position (x, y) — column and row on the grid
- Size (w, h) — width and height in grid units
- Min/Max constraints — optional minimum and maximum dimensions
- Static flag — prevents a widget from being moved or resized
Layout Persistence
Layouts are saved automatically using an upsert mechanism. The system stores the complete layout object (all breakpoints and widget positions) as a JSONB blob. On subsequent visits, the saved layout is loaded and applied. If no saved layout exists, the default arrangement is used.
Key characteristics:
- Layouts are scoped to user + organization (each user has a separate layout per org)
- The user ID and organization ID are determined from the server session (never from client input)
- Saves are debounced on the client side to avoid excessive server calls during drag operations
Available Widgets
The dashboard includes widgets for:
- My Items — tasks assigned to you with status, priority, and due dates
- Recent Activity — latest activity log entries across the organization
- Stats Cards — aggregate counts (total items, projects, members, completion rate)
- Status Distribution — item count per status label (chart view)
- Priority Breakdown — item count per priority level (chart view)
- Overdue Tasks — items past their due date and not yet completed
- KPI Summary — top KPIs with current value and traffic-light alert status
- Action Summary — counts of open, overdue, and escalated actions
Configuration
- Reset to default — delete your saved layout to restore the factory arrangement
- Widget visibility — controlled by the widget configuration panel (coming soon)
- Breakpoints — automatically managed based on browser width
Permissions
| Action | Required Role |
|---|---|
| View dashboard | Any member |
| Customize widget layout | Any member |
| View KPI and action widgets | Any member with relevant data access |
Each user's layout is private. Administrators cannot modify another user's dashboard arrangement.
Tips & Best Practices
Place the widgets you check most frequently in the top-left corner. The dashboard loads progressively from top to bottom, and top-left widgets receive attention first during daily standup reviews.
Take advantage of per-organization layouts. If you belong to multiple organizations, customize each dashboard to emphasize the metrics most relevant to that organization's transformation priorities.
Related Features
- Saved Views — Save board-level view configurations
- Keyboard Shortcuts — Navigate the dashboard quickly
- Command Palette — Jump to any dashboard or view