Project Dashboard
The Project Dashboard (also called "My Dashboard") is a project-specific, customizable dashboard that provides detailed progress tracking and analytics for individual projects through interactive charts and visualizations.
📋 Overview
Component Name: dashboardChartsList (technical), "My Dashboard" (user-facing)
Access: Users with zones.view permission AND active project
Purpose: Project-specific progress monitoring with customizable charts
Contrast: Appears instead of Global Dashboard when project conditions are met
The Project Dashboard serves as a personalized workspace for:
- Custom Chart Creation - Build tailored project views
- Progress Visualization - Bar and pie chart options
- Team Collaboration - Share charts with project members
- Detailed Analytics - Zone-level and project-level insights
🔑 Access Requirements
🎯 Required Conditions:
- Active Project Selected - User must be assigned to a project
- Permission:
zones.viewfor the current project - Project Role - Must be registered in the project
🔄 Dashboard Selection:
The system automatically routes users to:
- Project Dashboard ✅ - When project conditions are met
- Global Dashboard - When no project or missing permissions
🎨 Interface Layout
📊 Top Control Row (30/30/40 Layout)
┌─────────────┬─────────────┬─────────────────────┐
│Filter & Opt │ Sort Card │ Project Overview │
│ • Chart │ • Chart │ • Team Manager │
│ Type │ Sort │ • Zone Count │
│ • Dashboard│ • Order │ • Employees │
│ Selection│ │ • Progress/Hour │
│ • Filters │ │ • ETC & Forecast │
└─────────────┴─────────────┴─────────────────────┘
📈 Chart Visualization Area
┌─────────────────────────────────────────────────┐
│ Chart Display Area │
│ ┌─────────────────┬─────────────────────────┐ │
│ │ Bar Charts │ Pie Charts │ │
│ │ (List View) │ (Grid View) │ │
│ └─────────────────┴─────────────────────────┘ │
└─────────────────────────────────────────────────┘
🔧 Core Features
1️⃣ Filter & Options Card 🔽
Chart Type Toggle
- Bar Charts
📊- Horizontal progress bars with detailed columns - Pie Charts
🥧- Circular visualizations in grid layout - Toggle Switch - Seamless switching between view types
Dashboard Selection
| Option | Description | Access Level |
|---|---|---|
| My Dashboard | Personal charts created by you | Private to user |
| Public Dashboard | Charts shared by team members | Project-wide access |
Chart Filtering (when multiple charts exist)
- Chart Name Filter - Show/hide specific charts
- Selective Visibility - Control which charts display
- Dynamic Updates - Real-time filtering
2️⃣ Sort Card 📊
Purpose: Order charts by different criteria
📈 Sort Options:
| Field | Description | Use Case |
|---|---|---|
| Chart Name | Alphabetical by title | Organization |
| % Completion | Progress percentage | Priority identification |
| No. of Zones | Total zones in chart | Scope comparison |
| ETC | Estimated time to completion | Timeline management |
🔄 Sort Direction:
- Ascending
⬆️- Low to high values - Descending
⬇️- High to low values
3️⃣ Project Overview Card ℹ️
Purpose: Key project metrics and team information
📊 Displayed Information:
| Metric | Description | Source |
|---|---|---|
| Team Manager | Project supervisor name | Registration data |
| Zones | Total zones in project | Zone count |
| Employees | Team member count | Active registrations |
| Progress/Hour | Productivity rate | Calculated metric |
| Forecast | Completion time estimate | ETC calculation + current time |
📊 Chart Types & Visualizations
📈 Bar Chart View
Layout: Horizontal list with detailed columns
Column Structure:
| Column | Width | Content |
|---|---|---|
| Project Info | 30% | Title, subtitle, client details |
| Overall % | 5% | Completion percentage |
| ETC | 10% | Time estimate + forecast |
| In Progress | 10% | Active work indicators |
| Status Bar | 35% | Color-coded zone status |
| Total Zones | 5% | Zone count |
| Actions | 5% | Menu options |
Visual Elements:
- Color-coded progress bars showing zone status distribution
- Hover tooltips with detailed information
- Interactive elements for drilling down
- Status indicators for busy zones
🥧 Pie Chart View
Layout: Grid of circular charts
Chart Features:
- Overall pie chart - Project-wide view (always visible)
- Individual charts - Custom filtered views
- Interactive legends - Click to highlight segments
- Chart management - Edit, remove, use controls
Action Buttons:
| Button | Icon | Function | Availability |
|---|---|---|---|
| Edit | ✏️ | Modify chart filters | Creator or admin |
| Remove | 🗑️ | Delete chart | Creator or admin |
| Use | 🎯 | Apply chart filters | All users |
🎛️ Chart Management
➕ Creating New Charts
Button: "NEW CHART" with + icon
Creation Process:
- Click Add Chart button
- Define chart title and subtitle
- Set filter criteria (zones, status, etc.)
- Choose visibility (private or public)
- Save and view new chart
Filter Options:
- Zone Status - Filter by workflow state
- Zone Properties - Warehouse, division, flags
- Date Ranges - Time-based filtering
- Custom Attributes - Project-specific fields
✏️ Editing Existing Charts
Access: Chart creator or users with userProjectCharts.updatePublic permission
Editable Properties:
- Chart title and subtitle
- Filter criteria and conditions
- Visibility settings (private/public)
- Display preferences
🗑️ Removing Charts
Access: Same as editing permissions
Safety Features:
- Confirmation dialog before deletion
- No undo - permanent removal
- Creator protection - others can't delete your private charts
🎯 Sharing & Collaboration
🔄 Dashboard Modes
My Dashboard (Private)
- Personal charts created by you
- Private visibility - only you can see
- Full control - edit, delete, organize
- No public charts created by you shown here
Public Dashboard (Shared)
- Team charts marked as public
- Shared visibility - all project members can see
- Limited control - use and view only (unless admin)
- Collaborative workspace for team insights
📊 Chart Sharing Process
- Create chart in My Dashboard
- Mark as Public during creation/editing
- Chart becomes visible in Public Dashboard
- Team members can use but not modify (unless admin)
📱 Responsive Design
🖥️ Desktop View (>960px)
- Full column layout with all data visible
- Detailed tooltips and interactions
- Side-by-side comparisons possible
- All control cards visible simultaneously
📱 Mobile View (≤960px)
- Simplified column layout with essential data
- Collapsible cards with dropdown arrows
- Touch-friendly interactions
- Stacked information for readability
🎨 Visual Adaptations
- Progress bars scale to screen width
- Text truncation for long titles
- Icon-based indicators where space is limited
- Popup overlays for detailed information
🔄 Real-Time Features
📊 Live Data Updates
- Automatic refresh when zone status changes
- Progress recalculation based on work completed
- ETC adjustments based on productivity
- Team member updates when registrations change
🎯 Interactive Elements
- Chart tooltips with detailed breakdowns
- Clickable elements for navigation
- Filter applications with immediate results
- Sort changes with smooth transitions
💡 How to Use
🎯 Project Monitoring:
- Select appropriate dashboard mode (My/Public)
- Choose chart type (bar/pie) based on preference
- Sort charts by priority metric (completion, ETC, etc.)
- Review project overview for key metrics
- Drill down into specific charts for details
📊 Creating Custom Views:
- Click "NEW CHART" button
- Define meaningful title for the chart
- Set filter criteria to focus on specific zones
- Choose visibility (private for personal use, public for sharing)
- Save and review the new visualization
👥 Team Collaboration:
- Switch to Public Dashboard to see team charts
- Use others' charts to apply their filter settings
- Create public charts for team-wide visibility
- Coordinate with team on chart organization
📈 Performance Analysis:
- Compare completion percentages across charts
- Monitor ETC values for timeline planning
- Check in-progress indicators for current activity
- Use progress per hour to assess team velocity
❓ Troubleshooting
📊 Project Dashboard not showing?
- Verify you have
zones.viewpermission for current project - Check if you're assigned to an active project
- Ensure project registration is current and active
- Contact project manager for access issues
📈 Charts not loading?
- Check internet connection for real-time updates
- Refresh browser if charts appear stuck
- Verify chart filters aren't too restrictive
- Clear browser cache if persistent issues
➕ Can't create new charts?
- Ensure you're in "My Dashboard" mode
- Check if you have chart creation permissions
- Verify project has zones to chart
- Try refreshing page if button is unresponsive
✏️ Can't edit/remove charts?
- Only chart creators can edit private charts
- Need
userProjectCharts.updatePublicpermission for public charts - Switch to correct dashboard mode (My/Public)
- Check if chart exists and you have access
🔄 Dashboard mode switching not working?
- Verify you have access to both personal and public charts
- Check if project has public charts available
- Refresh page if toggle is unresponsive
- Ensure user preferences are being saved
📱 Mobile view issues?
- Use dropdown arrows to expand card content
- Scroll horizontally for wide charts
- Tap elements instead of hover for interactions
- Rotate device if layout appears cramped
🔧 Technical Details
📊 Data Sources:
- User Project Charts - Custom chart definitions and filters
- Zone Data - Real-time status and progress information
- Daily Projects - Aggregated metrics and ETC calculations
- User Preferences - Dashboard settings and chart type preferences
🧮 Chart Calculations:
// Progress Calculation
overall_progress = (completed_zones / total_zones) * 100
// ETC Calculation
etc_hours = (remaining_progress / progress_per_hour)
forecast_time = current_time + etc_hours
// Zone Status Distribution
status_percentage = (zones_in_status / total_zones) * 100
💾 Performance Features:
- Lazy loading for large chart datasets
- Incremental updates when data changes
- Cached calculations for complex metrics
- Optimized queries for filter operations
🔄 Real-Time Subscriptions:
- Zone status changes trigger chart updates
- Progress recalculations happen automatically
- Team member changes update project overview
- Chart modifications sync across browsers
🎯 Summary
The Project Dashboard provides comprehensive project monitoring through:
✅ Customizable visualizations with bar and pie chart options
✅ Personal and shared workspace for individual and team charts
✅ Real-time progress tracking with automatic updates
✅ Advanced filtering and sorting for targeted analysis
✅ Team collaboration features with public chart sharing
✅ Responsive design for desktop and mobile use
✅ Interactive elements for detailed exploration
📝 Note: Project Dashboard access requires active project assignment and proper permissions. Charts update automatically as work progresses in the project.