Work Order Timeline

A professional Angular 18+ timeline component for visualizing and managing work orders across multiple work centers. Built with modern Angular patterns, responsive design, and pixel-perfect UI implementation.

🎯 Features

Core Features

• Interactive Timeline Grid with three zoom levels:
  • Day view (individual days)
  • Week view (weekly buckets)
  • Month view (monthly buckets)
• Work Order Management:
  • Create new work orders by clicking on the timeline
  • Edit existing orders with form validation
  • Delete orders with confirmation
  • Real-time status updates
• Status Indicators: Visual badges for Open, In Progress, Complete, and Blocked states
• Overlap Detection: Validates that work orders don't overlap on the same work center
• Responsive Design: Adapts to different screen sizes with horizontal scrolling
• Smooth Animations: Slide-in/out panel with transitions
• Sample Data: 8 work centers with 24 pre-configured work orders

Technical Features

• ✅ Angular 18+ with standalone components
• ✅ Reactive Forms with validation
• ✅ Signals and computed properties for state management
• ✅ RxJS operators (combineLatestWith, takeUntil)
• ✅ OnPush change detection strategy
• ✅ SCSS with CSS variables and BEM naming
• ✅ TypeScript strict mode
• ✅ Prettier code formatting

📋 Requirements Met

✅ Must Have:

• Timeline grid with Day/Week/Month zoom levels
• Work order bars with status indicators
• Create/Edit slide-out panel with form validation
• Overlap detection with error feedback
• All interactive features (create, edit, delete)
• Sample data (8 work centers, 24 work orders)
• Working Angular 17+ application
• Clean, maintainable code

✅ Bonus Features Implemented:

• Smooth animations and transitions
• Responsive design with media queries
• Hover tooltips with cursor tracking
• Synchronized scroll panels
• Centralized label configuration
• Prettier formatting integration

🚀 Quick Start

Prerequisites

• Node.js 18+ and npm 10+
• Angular CLI 21.0.4+

Installation

# Clone the repository
git clone <repo-url>
cd work-order-timeline

# Install dependencies
npm install --legacy-peer-deps

# Start the development server
npm start

Navigate to http://localhost:4200/ in your browser. The application will automatically reload when you modify source files.

🧪 Testing

This project includes a comprehensive automated test suite using Vitest.

Running Tests

# Run tests once
npm test

# Run tests in watch mode (auto-rerun on file changes)
npm run test:watch

# Run tests with UI dashboard
npm run test:ui

Test Coverage

45 tests across 8 test suites:

• Components (25 tests):

  • Status Badge Component (4 tests)
  • Work Order Bar Component (6 tests)
  • Work Order Panel Component (8 tests)
  • Timeline Component (7 tests)

• Services (20 tests):

  • Timeline Service (5 tests)
  • Work Order Validation Service (6 tests)
  • Work Order Data Service (7 tests)
  • App (2 tests)

What's Tested

✅ Component rendering and lifecycle ✅ Form validation and error handling ✅ Overlap detection algorithm ✅ Date calculations and positioning ✅ CRUD operations (Create, Read, Update, Delete) ✅ Status badge display ✅ Menu interactions ✅ Panel open/close behavior

📖 How to Use

Viewing the Timeline

1. Open the application - the timeline will center on today's date
2. Use the Timescale dropdown to switch between Day, Week, and Month views
3. Scroll horizontally to view different date ranges
4. Hover over work order rows to see interactive tooltips

Creating a Work Order

1. Click on any empty area in the timeline grid
2. The Create Work Order panel will slide in from the right
3. Fill in the form fields:
   • Work Order Name: Required, 2-100 characters
   • Status: Select from Open, In Progress, Complete, or Blocked
   • Start Date: Auto-filled from click position, adjustable
   • End Date: Auto-filled to 7 days after start date
4. Click Create to save (or Cancel to close without saving)
5. If dates overlap with existing orders on the same work center, you'll see an error

Editing a Work Order

1. Click the three-dot menu (⋮) on any work order bar
2. Select Edit from the dropdown
3. The Edit Work Order panel will open with current data
4. Modify any field and click Save
5. Same validation rules apply as creation

Deleting a Work Order

1. Click the three-dot menu (⋮) on any work order bar
2. Select Delete from the dropdown
3. The work order will be removed immediately

🏗️ Architecture

Component Structure

app/
├── components/
│   ├── timeline/              # Main timeline component
│   ├── work-order-panel/      # Create/Edit modal
│   ├── work-order-bar/        # Individual work order bar
│   └── status-badge/          # Status indicator badge
├── services/
│   ├── timeline.service.ts    # Date calculations & positioning
│   ├── work-order-data.service.ts  # CRUD operations
│   └── work-order-validation.service.ts  # Business rules
├── models/                    # TypeScript interfaces
├── enums/                     # Status & mode enumerations
├── labels/                    # Centralized UI text
├── config/                    # Static configurations
└── data/                      # Sample data

Key Design Decisions

1. Signals over traditional state management

• Angular 18+ signals provide reactive state with minimal boilerplate
• Computed properties automatically track dependencies
• Better performance with OnPush change detection

2. Service-based architecture

• TimelineService: Handles all date calculations and column positioning
• WorkOrderDataService: Manages CRUD operations
• WorkOrderValidationService: Validates business rules

3. Reactive Forms

• Robust validation with custom validators
• Overlap detection prevents data conflicts
• Form-level validation for date ranges

4. Centralized Configuration

• All UI labels in app.labels.ts
• Status colors and options in config files
• Easy to maintain and translate

5. CSS Variables for theming

• Dark/light color system with semantic names
• SCSS variables for spacing and sizing
• BEM naming convention for predictable selectors

🛠️ Scripts

# Development server
npm start
# Runs on http://localhost:4200/

# Build for production
npm run build
# Output: dist/work-order-timeline/

# Format code with Prettier
npm run format
# Checks formatting without changes
npm run format:check

# Run tests
npm test

📦 Dependencies

Core

• @angular/core@21.0.0: Framework
• @angular/forms@21.0.0: Reactive forms and validation
• rxjs@7.8.0: Reactive programming library

UI Components

• @ng-bootstrap/ng-bootstrap@20.0.0: Date picker component
• @ng-select/ng-select@21.1.3: Dropdown/select component

Development

• typescript@5.9.2: Type safety
• prettier@3.1.1: Code formatting
• vitest@4.0.8: Test framework

🎨 Design System

Colors

All colors use CSS variables defined in src/styles/colors.scss:

• Primary: Purple (--color-primary-purple)
• Status: Green (complete), Orange (blocked), Blue (open), Purple (in-progress)
• Neutral: Dark overlays and light backgrounds

Typography

• Font Family: Circular Std
• Heading: 24px, weight 600
• Body: 14px, weight 400
• Labels: 13px, weight 500

Spacing

• Grid unit: 8px
• Common gaps: 8px, 12px, 16px, 24px, 32px

🔄 Data Flow

Timeline Component (Parent)
├── Loads: workCenters$ & workOrders$ from DataService
├── Computes: centersWithWorkOrders (mapped with orders)
├── Signals: zoomLevel, selectedWorkOrder, hoveredRow
│
├── Timeline Grid (Child)
│   └── Renders: Work order bars with positioning
│
└── Work Order Panel (Child)
    ├── Mode: CREATE | EDIT
    └── Form: Reactive FormGroup with validation

✅ Validation Rules

• Work Order Name: Required, 2-100 characters
• Start Date: Required, must be before end date
• End Date: Required, must be after start date
• Status: Required, must be valid enum value
• Overlap Check: No two orders on same work center can have overlapping date ranges

📱 Responsive Behavior

• Desktop (1024px+): Full layout with fixed left panel
• Tablet (768px-1023px): Reduced spacing, full functionality
• Mobile (<768px): Panel adjusts to 100% width, horizontal scroll required for timeline

🎯 Zoom Level Behavior

Day View

• Shows individual days as columns
• Timeline buffer: ±30 days from today
• Best for short-term planning

Week View

• Shows weeks (Monday-Sunday)
• Timeline buffer: ±12 weeks from today
• Useful for medium-term planning

Month View

• Shows full months
• Timeline buffer: ±12 months from today
• Good for long-term strategic planning

🎥 Demo

See the Loom video for a complete walkthrough of:

• All zoom levels in action
• Creating, editing, and deleting work orders
• Overlap detection scenario
• Form validation feedback
• Responsive behavior

🚀 Future Enhancements

Potential improvements for future versions:

• localStorage persistence for offline support
• API integration with backend
• Advanced filtering and search
• Bulk operations (select multiple orders)
• Undo/redo functionality
• Export timeline as PDF/Excel
• Virtual scrolling for 1000+ work orders
• Multi-language support (i18n)
• Automated test suite
• Performance monitoring
• ARIA labels for accessibility
• Keyboard navigation shortcuts

📝 Development Notes

Date Handling

• All dates stored in ISO format (YYYY-MM-DD)
• Local timezone interpretation (no UTC conversion)
• Custom parseISODateString() ensures consistent date parsing across all components
• Timeline columns calculated relative to today's date with zoom-based buffers

Performance Optimizations

• track functions in @for loops for efficient rendering
• OnPush change detection reduces unnecessary checks
• Computed properties memoize expensive calculations
• Proper cleanup with destroy$ Subject and takeUntil() operator
• RxJS combineLatestWith() for efficient observable composition

Code Quality

• Prettier formatting enforced (run npm run format)
• TypeScript strict mode enabled
• JSDoc comments on public methods
• BEM SCSS naming convention
• Service separation of concerns

Key Implementation Details

Timeline Positioning:

• Bar positions calculated from column width and date offsets
• Responsive scrolling with proper offset calculations
• Initial scroll centers on today's date using afterNextRender() hook

Form Validation:

• Reactive Forms with FormGroup and FormControl
• Custom validators for overlap detection
• Real-time error feedback
• Form-level date range validation

State Management:

• Angular signals for reactive state
• Computed properties for derived state
• Effects for side-effect handling
• Proper subscription cleanup with destroy$ Subject

📄 License

[Add your license here]

---

Built with ❤️ using Angular 18+

For issues, questions, or suggestions, please refer to the GitHub repository issues page.