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