¶ 📊 Dashboard Management Center
Create, customize, and manage your dashboards with SysRI CRM's Dashboard Management Center. This powerful interface provides flexible widget layouts, role-based permissions, and dynamic dashboard creation to deliver personalized insights and analytics for every user.
Dashboard Overview
¶ 🧭 Quick Navigation
- 🏗️ Layout Structure Flexible dashboard design
- 📋 Dashboard Manager Create and manage dashboards
- 🔧 Widget System Dynamic widget management
- 🔐 Permission System Role-based access control
- ⚙️ Edit Mode Customize your dashboards
- 🎛️ Layout Controls Manage dashboard appearance
¶ 🚀 New User Quick Start
Getting Started with Your First Dashboard
If you're new to SysRI's Dashboard Management Center, this quick guide will help you create your first personalized dashboard in just a few minutes.
¶ What You'll Learn
- Understanding Dashboards: What dashboards are and why they're useful
- Creating Your First Dashboard: Step-by-step dashboard creation
- Adding Widgets: How to add and arrange widgets
- Customizing Layout: Making your dashboard fit your needs
- Common Use Cases: Real-world examples for different roles
¶ Before You Begin
- User Account: Ensure you have a SysRI account with appropriate permissions
- Browser: Use a modern web browser (Chrome, Firefox, Safari, Edge)
- Screen Size: Desktop or tablet recommended for best experience
¶ Your First Dashboard in 5 Minutes
Dashboard Overview
¶ Step 1: Access Dashboard Management
- Navigate to Reports → Dashboard Management in your SysRI menu
- You'll see the Dashboard Management Center interface
- The left sidebar shows your available dashboards (initially empty)
¶ Step 2: Create Your First Dashboard
- Click "Create Dashboard" in the left sidebar
- Enter a name like "My First Dashboard"
- Choose "Start from Scratch" for full customization
- Click "Create" - your new dashboard will appear immediately
¶ Step 3: Add Your First Widget
- Your dashboard will be empty initially
- Click "Add Widget" or "Edit Mode" to start customizing
- Browse available widgets based on your role
- Click on a widget (e.g., "Recent Activities") to add it
- The widget will appear on your dashboard
¶ Step 4: Arrange and Customize
- Drag widgets to reposition them
- Resize widgets by dragging their corners
- Configure settings by clicking the widget's settings icon
- Save changes automatically when you exit edit mode
¶ Step 5: Set as Homepage (Optional)
- Click the "Set as Homepage" button
- Confirm your selection
- Your dashboard will now appear when you log into SysRI
¶ Common Use Cases
¶ For Sales Teams
- Deal Pipeline Widget: Track your sales opportunities
- Recent Activities Widget: Monitor customer interactions
- Revenue Chart: Visualize sales performance
- Task List Widget: Manage follow-up activities
¶ For Managers
- Team Performance Widget: Monitor team metrics
- Activity Summary Widget: Overview of team activities
- Custom Charts: Create charts for specific KPIs
- Notification Widget: Stay updated on important events
¶ For Customer Support
- Ticket Status Widget: Monitor support tickets
- Customer Satisfaction Widget: Track satisfaction metrics
- Response Time Chart: Monitor support performance
- Recent Tickets Widget: Quick access to latest tickets
¶ What You'll See
- Left Sidebar: Your dashboard list and creation tools
- Main Area: Your widgets arranged in a flexible grid
- Edit Mode: Lock/unlock button to enable customization
- Widget Library: Available widgets based on your permissions
- Settings Panel: Configure individual widget options
¶ Next Steps
Once you've created your first dashboard, explore the detailed sections below to:
- Master advanced features like permissions and role-based access
- Create multiple dashboards for different purposes
- Share dashboards with team members
- Optimize performance with efficient widget configurations
¶ 🏗️ Layout Structure
The Dashboard Management Center features a flexible two-panel layout designed for optimal dashboard management:
¶ Left Sidebar: Dashboard Manager
¶ Collapsible Design
- Toggle Visibility: Show/hide sidebar with smooth animations
- Responsive Width: 256px when visible, 0px when hidden
- Smooth Transitions: 300ms ease-in-out animations
- Dark Mode Support: Compatible with light and dark themes
¶ Sidebar Features
- Dashboard List: Complete list of available dashboards
- Create Dashboard: Add new custom dashboards
- Delete Dashboard: Remove unwanted dashboards
- Dashboard Selection: Switch between different dashboards
- Selection Status: Real-time feedback on selection process
¶ Main Content Area: Widget Display
¶ Widget Container
- Flexible Layout: Responsive grid system for widgets
- Dynamic Sizing: Widgets adapt to available space
- Gap Management: Configurable spacing between widgets
- Background Styling: Customizable background colors
¶ Content States
- Dashboard Loaded: Display widgets for selected dashboard
- Loading State: Show loading indicator while fetching data
- Empty State: Prompt to select or create a dashboard
- Error State: Handle and display error conditions
¶ 📋 Dashboard Manager
Comprehensive dashboard creation and management capabilities:
¶ Dashboard Operations
¶ Create Dashboard
- Custom Names: Assign meaningful names to dashboards
- Template Selection: Choose from predefined templates
- Widget Presets: Pre-configured widget layouts
- Auto-selection: Automatically select newly created dashboards
¶ Select Dashboard
- Dashboard List: Browse all available dashboards
- Quick Selection: Click to switch between dashboards
- URL Integration: Direct access via query parameters
- State Persistence: Remember last selected dashboard
¶ Delete Dashboard
- Confirmation: Prevent accidental deletions
- Cascade Cleanup: Remove associated widgets and data
- State Update: Clear selection if deleted dashboard was active
- User Feedback: Toast notifications for operation status
¶ Dashboard Data Management
¶ Widget Storage
- User Preferences: Store widget configurations per user
- Dashboard-specific: Separate widget sets for each dashboard
- Real-time Updates: Immediate synchronization of changes
- Persistent Storage: Maintain configurations across sessions
¶ Data Synchronization
- API Integration: Fetch dashboard data from backend
- Widget Updates: Real-time widget position and configuration updates
- Error Handling: Graceful handling of network issues
- Loading States: Visual feedback during data operations
¶ 🔧 Widget System
Dynamic widget management with role-based access control:
¶ Available Widgets
¶ Widget Categories
- Home Widgets: Default widgets for home dashboard
- Analytics Widgets: Charts, graphs, and data visualizations
- Management Widgets: Administrative and control widgets
- Custom Widgets: User-defined and specialized widgets
¶ Widget Properties
- Required Permissions: Role-based access control
- Widget Configuration: Customizable settings and parameters
- Layout Support: Flexible positioning and sizing
- Responsive Design: Adapt to different screen sizes
¶ Widget Filtering
¶ Permission-Based Filtering
- Admin Access: Super users see all available widgets
- Role Permissions: Filter widgets based on user roles
- Permission Codes: Match widget requirements with user permissions
- Dynamic Updates: Update widget availability based on permission changes
¶ Widget Availability
- Permission Check: Verify user has required permissions
- Admin Override: Administrators bypass permission restrictions
- Fallback Handling: Graceful handling of missing permissions
- User Feedback: Clear indication of available widgets
¶ Widget Management
¶ Widget Positioning
- Drag and Drop: Intuitive widget repositioning
- Grid Layout: Organized widget arrangement
- Size Control: Adjustable widget dimensions
- Layout Persistence: Save widget positions automatically
¶ Widget Configuration
- Settings Panel: Configure widget parameters
- Data Sources: Connect widgets to data sources
- Display Options: Customize widget appearance
- Refresh Controls: Manage data update frequency
¶ 🔐 Permission System
Comprehensive role-based access control for dashboards and widgets:
¶ User Roles and Permissions
¶ Role Management
- Global Admin: Full access to all features and widgets
- Role-based Access: Specific permissions based on user roles
- Permission Codes: Granular control over widget access
- Dynamic Permissions: Real-time permission updates
¶ Permission Checking
- Widget Permissions: Verify access to specific widgets
- Dashboard Permissions: Control dashboard creation and management
- Admin Override: Super users bypass permission restrictions
- Permission Validation: Ensure proper access control
¶ Permission Integration
¶ API Integration
- Role Fetching: Retrieve user roles from authentication system
- Permission Fetching: Get detailed permissions for each role
- Permission Mapping: Match user roles to widget requirements
- Error Handling: Graceful handling of permission fetch failures
¶ User Context
- Display Name: Show personalized welcome messages
- User Identification: Track user-specific dashboard preferences
- Session Management: Maintain user context across sessions
- Permission Caching: Optimize permission checking performance
¶ ⚙️ Edit Mode
Dynamic dashboard customization and editing capabilities:
¶ Edit Mode Controls
¶ Toggle Functionality
- Enable/Disable: Switch between view and edit modes
- Visual Indicators: Clear indication of current mode
- Icon Changes: Dynamic icons for edit mode state
- Tooltip Support: Helpful hints for edit mode actions
¶ Edit Mode Features
- Widget Repositioning: Move widgets during edit mode
- Widget Resizing: Adjust widget dimensions
- Widget Configuration: Modify widget settings
- Layout Persistence: Save changes automatically
¶ Edit Mode Restrictions
¶ Dashboard Limitations
- Classic Dashboard: Read-only mode for classic dashboard
- Permission-based: Edit mode based on user permissions
- Admin Override: Administrators can edit all dashboards
- Validation: Ensure proper edit permissions
¶ Widget Limitations
- Permission-based: Edit widgets based on user permissions
- Widget-specific: Individual widget edit permissions
- Configuration Limits: Restrict widget configuration options
- Data Protection: Prevent unauthorized data modifications
¶ 🎛️ Layout Controls
Advanced layout management and customization options:
¶ Sidebar Controls
¶ Toggle Functionality
- Show/Hide Sidebar: Control sidebar visibility
- Smooth Animations: 300ms transition animations
- State Persistence: Remember sidebar state
- Responsive Behavior: Adapt to different screen sizes
¶ Sidebar States
- Visible State: Full sidebar with dashboard manager
- Hidden State: Collapsed sidebar for more content space
- Transition State: Smooth animation between states
- Mobile Adaptation: Responsive behavior on mobile devices
¶ Layout Customization
¶ Background Styling
- Theme Support: Light and dark mode compatibility
- Custom Colors: Configurable background colors
- Gap Styling: Customizable spacing between widgets
- Border Management: Control border appearance
¶ Responsive Design
- Screen Adaptation: Adapt to different screen sizes
- Mobile Optimization: Optimized layout for mobile devices
- Tablet Support: Responsive design for tablet screens
- Desktop Enhancement: Enhanced features for desktop users
¶ 🛠️ Additional Features
¶ Data Management
- Real-time Updates: Automatic data synchronization
- Error Handling: Graceful error display and recovery
- Loading States: Visual feedback during data operations
- Caching: Efficient data storage and retrieval
¶ User Experience
- Responsive Design: Works on desktop and mobile devices
- Dark Mode Support: Compatible with dark/light themes
- Keyboard Navigation: Full keyboard accessibility
- Tooltips: Helpful hints for all interactive elements
- Toast Notifications: User feedback for all operations
¶ Integration
- Store Integration: Uses Pinia store for state management
- API Integration: RESTful API communication
- Route Integration: URL-based dashboard selection
- Authentication Integration: User role and permission management
¶ Advanced Features
- Query Parameters: Direct dashboard access via URL
- Auto-selection: Automatic dashboard selection based on context
- State Persistence: Maintain user preferences and selections
- Performance Optimization: Efficient widget rendering and updates
¶ 💡 Pro Tips
- Dashboard Organization: Create specific dashboards for different use cases
- Widget Permissions: Configure widgets based on user roles and responsibilities
- Layout Optimization: Use edit mode to arrange widgets for optimal workflow
- Sidebar Management: Hide sidebar when working with large dashboards
- Permission Planning: Design permission structure for scalable access control
- Widget Selection: Choose widgets that provide relevant insights for each role
- Dashboard Templates: Use templates for consistent dashboard creation
- URL Sharing: Share dashboard URLs with query parameters for direct access
¶ 🔄 Workflow Examples
¶ Creating a New Dashboard
- Click "Create Dashboard" in the sidebar
- Enter a meaningful dashboard name
- Select appropriate template or start from scratch
- Choose relevant widgets based on your role
- Arrange widgets in optimal layout
- Save dashboard configuration
- Dashboard appears in sidebar list immediately
¶ Customizing Dashboard Layout
- Enable edit mode using the lock/unlock button
- Drag widgets to reposition them on the dashboard
- Resize widgets to optimize space usage
- Configure widget settings for your needs
- Save layout changes automatically
- Exit edit mode to return to view mode
- Changes persist across sessions
¶ Managing Widget Permissions
- Review available widgets based on your role
- Request additional permissions if needed
- Configure widgets with appropriate settings
- Arrange widgets for optimal workflow
- Test widget functionality and data display
- Adjust widget configurations as needed
- Share dashboard with team members
¶ Optimizing Dashboard Performance
- Select only necessary widgets for your role
- Configure widget refresh intervals appropriately
- Use efficient widget layouts and positioning
- Monitor dashboard loading times
- Adjust widget complexity based on performance
- Cache frequently accessed data
- Optimize widget configurations for better performance
¶ ❓ Common Questions
¶ Getting Started Questions
¶ "I don't see any widgets available. What should I do?"
- Check your permissions: Contact your administrator to ensure you have the necessary role permissions
- Refresh the page: Sometimes widgets need a moment to load
- Try different browsers: Ensure you're using a supported browser
- Clear browser cache: Clear your browser's cache and cookies
¶ "How do I know which widgets are right for my role?"
- Role-based filtering: The system automatically shows widgets based on your user role
- Admin users: See all available widgets
- Regular users: See widgets relevant to their permissions
- Contact admin: If you need access to additional widgets
¶ "Can I create multiple dashboards for different purposes?"
- Yes: Create unlimited dashboards for different use cases
- Examples: Sales dashboard, management dashboard, support dashboard
- Switch easily: Use the sidebar to switch between dashboards
- Set different homepages: Each dashboard can be set as homepage
¶ "What happens if I accidentally delete a widget?"
- Don't worry: Widgets can be easily re-added
- No data loss: Deleting a widget doesn't affect your data
- Re-add quickly: Use the widget library to add it back
- Auto-save: Your layout changes are saved automatically
¶ Technical Questions
¶ "Why can't I edit my dashboard?"
- Check edit mode: Ensure edit mode is enabled (lock/unlock button)
- Permission check: Verify you have edit permissions for this dashboard
- Classic dashboard: Some system dashboards are read-only
- Contact admin: If you need edit permissions
¶ "How do I share my dashboard with team members?"
- Permission-based: Dashboards are shared based on user roles
- Admin control: Administrators can assign dashboard access
- Role inheritance: Users inherit dashboard access based on their role
- Contact admin: Request dashboard sharing through your administrator
¶ "My dashboard is loading slowly. What can I do?"
- Reduce widgets: Remove unnecessary widgets
- Optimize layout: Use efficient widget arrangements
- Check internet: Ensure stable internet connection
- Browser performance: Close unnecessary browser tabs
- Contact support: If issues persist
¶ Troubleshooting
¶ Dashboard Not Loading
- Refresh the page and try again
- Check internet connection for stability
- Clear browser cache and cookies
- Try a different browser (Chrome, Firefox, Safari)
- Contact support if problem continues
¶ Widgets Not Displaying Data
- Check permissions for data access
- Verify data sources are available
- Refresh widgets manually
- Check date ranges in widget settings
- Contact admin for data access issues
¶ Layout Issues
- Enable edit mode to make changes
- Check screen size - some layouts work better on larger screens
- Reset layout by recreating the dashboard
- Try different browsers for compatibility
- Contact support for persistent layout problems
¶ Need More Help?
- Administrator Support: Contact your system administrator for permission issues
- Technical Support: Reach out to SysRI support for technical problems
- Documentation: Refer to other SysRI documentation for related features
- Community: Check SysRI community forums for user tips and solutions
By effectively leveraging the Dashboard Management Center, you can create personalized, role-based dashboards that provide relevant insights and improve productivity. The flexible widget system and comprehensive permission controls ensure secure, efficient dashboard management for all users.