1.Project Dashboard

Published:

Project Dashboard

1. Project Overview & Core Features

  • Objective: Implement a comprehensive enterprise workflow management system that visualizes and tracks the entire process from sales to warehouse operations, enabling cross-departmental collaboration, improving efficiency, and preventing task omissions.

  • Core Workflow: Each department maintains independent checklists that only department users can operate. Upon completion of all items in a department’s checklist, the project automatically progresses to the next department in the workflow sequence.


2. Technical Architecture

  • Frontend-Backend Separation:
    • Frontend: React 19.1.0 with React Router DOM 7.6.1 (Deployed to GitHub Pages)
    • Backend: Node.js with Express (Deployed to AliCloud cloud services)
    • Database: MongoDB
    • Additional Libraries: Axios for API calls, Day.js for date handling, HTML2PDF for report generation, @hello-pangea/dnd for drag-and-drop functionality

3. Core Data Models (Database Collections)

  • Admin List: System administrator registry (editable only by administrators)

  • User List: User information (username, encrypted password, email, department assignment)

  • Department List: Department information (e.g., Sales, Engineering, etc., with support for future expansion)

  • Project List: Project information (name, creation date, creator, progress percentage, unique ID, OPD date)

  • Department Checklist: Department-specific checklists (ID, associated project ID, department, completion progress)

  • Checklist Item: Individual checklist tasks (associated checklist ID, creator, creation timestamp, completion status, comments, completion timestamp, completed by user, assigned user, assignment timestamp, started by user, start timestamp)

  • Template System: Reusable checklist templates for departments with default template assignments

  • Notification System: Real-time notifications for project updates, task assignments, and user mentions


4. Authentication & Security

  • Permission Management:
    • Only department users can check off items in their department’s checklist
    • Administrators have additional management privileges
    • Users from other departments can only view project details
    • Role-based access control for project creation (Sales and Admin only)
  • Security Features:
    • Password encryption storage
    • JWT-based authentication
    • Frontend-backend API permission validation
    • Auto-logout functionality for inactive users
    • Token expiration handling with automatic redirect to login

5. Flexibility & Maintainability

  • Workflow Configuration:
    • Easy workflow adjustments, department additions/removals without extensive code changes
    • Drag-and-drop department reordering in admin panel
  • Data Structure Design:
    • Extensible field design with reserved space for future enhancements
    • Template system for standardized checklist creation
    • Modular component architecture for easy maintenance

6. Key Pages & Features

Authentication Pages

  • Login/Register: User registration and login with department selection
  • Auto-logout: Automatic session termination for inactive users

Project Management

  • Project List Page: Card-based project display with filtering, sorting, and search capabilities
  • Project Creation: Restricted to Sales and Admin users
  • Project Detail Page: Visual workflow representation with department checklists and progress tracking
  • OPD Management: Order Promise Date setting and tracking with urgency-based sorting

Workflow Visualization

  • Progress Tracker: Ball indicator showing current workflow position
  • Department Blocks: Color-coded status (green=completed, orange=current, white=pending)
  • Checklist Management: Interactive checklist items with completion tracking

User Interface Features

  • Responsive Design: Compatible with desktop and mobile devices
  • Real-time Updates: Live project status and notification updates
  • PDF Report Generation: Export project details and progress reports
  • Drag-and-Drop: Department reordering in admin panel

Administrative Functions

  • User Management: User creation, editing, and role assignment
  • Department Management: Department creation, editing, and workflow ordering
  • Admin Management: Administrator privilege assignment and removal
  • Template Management: Create and manage reusable checklist templates

7. Advanced Features

  • Template System: Pre-defined checklist templates for each department with default assignments
  • Notification System: Real-time notifications for project updates, task completions, and workflow progress
  • Global Statistics: Dashboard showing unfinished projects, department statistics, and user-blocked projects
  • OPD Tracking: Order Promise Date tracking with urgency-based sorting
  • Comment System: Mandatory comments for task completion with full audit trail
  • Export Functionality: PDF report generation for project documentation
  • User Mention System: @user functionality in comments with notification system
  • Task Assignment System: Individual task assignment with assignment tracking
  • Task Status Management: Multi-stage task status (unassigned, todo, in_progress, complete)

8. Page Structure & Navigation

Authentication Flow

  • Login (username/email + password, redirect to main page)
  • Registration (username, email, department, password, password confirmation with department dropdown)
  • Automatic logout for inactive users
  • Token expiration handling with daily re-authentication requirement
  • Active Projects: Currently in-progress projects
  • Finished Projects: Completed projects
  • All Projects: Complete project listing
  • Templates: Template management (Admin only)
  • Create New Project: Project creation (Sales and Admin only)
  • User Profile: User information and settings (top-right avatar/username)
  • Logout: Session termination
  • Global Statistics: Real-time counters for unfinished projects and department checklists
  • Notification Center: Real-time notification system with read/unread status

Project List Page

  • Card-based project display (project name, progress, creation duration, OPD date)
  • Status filtering (active/completed/all)
  • Multiple sorting options (OPD urgency, creation date, progress percentage)
  • Project card click navigation to detail view
  • Project deletion and renaming capabilities
  • OPD date setting and modification

Project Detail Page

  • Top workflow diagram (department flow with current progress highlighting)
  • Department checklist sections with item lists
  • Interactive checklist items (checkable, hover details, click confirmation with mandatory comments)
  • Department-specific permissions (check/uncheck/create/delete for own department, read-only for others)
  • Universal commenting capability across all departments
  • PDF report generation functionality
  • Template loading and application

Checklist Item Interactions

  • Task Assignment: Assign tasks to specific users within the department
  • Task Status Management:
    • Unassigned (gray) - No user assigned
    • Todo (blue) - Assigned but not started
    • In Progress (orange) - Currently being worked on
    • Complete (green) - Finished with mandatory completion comment
  • Task Actions:
    • Assign to self (for department users and admins)
    • Start task (for assigned user only)
    • Complete task (for assigned user only, requires comment)
    • Edit task content (for assigned user when status is todo)
    • Add comments with @user mentions
  • Comment System:
    • Mandatory comments for task completion
    • Optional comments for progress updates
    • @user mention functionality with notification system
    • Full comment history with timestamps and user information
  • Hover Details: Creator, assignment, start, completion information with timestamps

Admin Panel

  • User Management: User creation, editing, and role assignment
  • Department Management: Department creation, editing, and workflow ordering with drag-and-drop
  • Admin Management: Administrator privilege assignment and removal
  • Template Management: Create and manage reusable checklist templates with default assignments
  • System-wide Statistics: Monitoring and reporting capabilities

Progress Tracking System

  • Ball tracker positioned at first incomplete department (orange highlight)
  • Completed departments shown in green
  • Pending departments shown in white
  • Full completion indicated by all green with no ball or orange highlighting
  • Real-time progress updates across all users

Template Management System

  • Template Creation: Create reusable checklist templates for each department
  • Template Assignment: Set default templates for departments
  • Template Application: Load templates into new or existing projects
  • Template Editing: Modify existing templates with item addition/removal
  • Template Preview: Hover to preview template contents before application

Notification System

  • Real-time Notifications: Live updates for project changes and task assignments
  • User Mentions: @user functionality in comments triggers notifications
  • Notification Center: Centralized notification management with read/unread status
  • Notification Types: Task assignments, completions, comments, project updates
  • Notification Preferences: User-configurable notification settings

Global Dashboard Features

  • Unfinished Project Counter: Real-time count of incomplete projects
  • Department Statistics: Department-specific checklist completion rates
  • User-blocked Projects: Projects blocked by specific user’s incomplete tasks
  • OPD Tracking: Order Promise Date monitoring with urgency indicators
  • System Health Monitoring: Overall system status and performance metrics

9. Frontend Development Highlights

  1. React 19.1.0 with Hooks and React Router DOM 7.6.1 for modern component architecture
  2. Global State Management: User authentication, permissions, and department information via Context API
  3. API Integration: Axios instance with automatic token handling and environment variable support
  4. Protected Routes: Role-based page rendering and unauthorized access prevention
  5. Custom UI Components: Tailored components for forms, modals, progress indicators, and cards
  6. Form Validation: Comprehensive validation for registration, login, project creation, and comments
  7. User Feedback: Toast notifications, loading states, and error handling
  8. Responsive Layout: Cross-platform compatibility for desktop and mobile devices
  9. Code Organization: Clear separation with pages, components, api, utils, and hooks directories
  10. PDF Generation: HTML2PDF integration for report export functionality
  11. Drag-and-Drop: @hello-pangea/dnd integration for department reordering
  12. Real-time Updates: Live data synchronization across all users
  13. Advanced Modals: Comprehensive modal system for all user interactions
  14. Status Management: Multi-stage task status with visual indicators
  15. Comment System: Rich comment functionality with user mentions

10. Deployment & Environment

  • Frontend: Deployed to GitHub Pages with custom domain configuration
  • Backend: Cloud deployment (Azure) with environment-specific API endpoints
  • Build Process: Automated build and deployment with PowerShell scripts
  • Version Control: Git-based development with production build tracking

11. Future Enhancements

  • Multi-language support for internationalization
  • Advanced reporting and analytics dashboard
  • Mobile application development
  • Integration with external enterprise systems
  • Advanced notification preferences and delivery methods
  • Enhanced audit logging and compliance reporting
  • Advanced workflow automation and triggers
  • Integration with calendar systems for OPD tracking
  • Advanced search and filtering capabilities
  • Bulk operations for project and task management