can you create two lines per project, first line (stages) contains the current project planning. Give the stages each a tailwind color. Second line shows the gates (label: gates). in that line you have a gate per stage in the same color. The gate can be in de same week as the end week of the stage, but also later or earlier. If earlier the gate is late (orange). Project Brief: Project Portfolio Dashboard Build a comprehensive project portfolio management dashboard with the following features: Core Dashboard Features: Display projects in a timeline view with weeks as columns Show project stages with color-coded phases Display gates (milestones) with different view modes (baseline, committed, planned) Support for multiple project types and team roles Current week highlighting and navigation controls Project Data Structure: Project number, name, type (e.g., "New Product", "Enhancement") Project owner and project manager with initials display (up to 4 characters) Multiple stages with start weeks and color coding Gates with different date types and status tracking, gate has same color as stage Gates can be planned independently of Stages. Stages have a start and end week. Gates just have a week Timeline & Navigation: Week-based timeline with year headers Navigation controls: previous/next weeks, jump to specific week, reset to current Current week visual indicator Current week indicator Responsive design for different screen sizes Two lines per project: Stages and Gates. If Gate week is before the stage end week the Gate is late (red) Filtering & Sorting: Advanced filter builder with AND/OR logic Filter by: project number, name, project leader, project manager, type, gate status, team member Special gate status filters (early, on-time, late) Sort by project number, start date, or end date (ascending/descending) View modes: "My Projects" vs "All Projects" User Interface: Clean, professional design using Tailwind CSS Project rows with expandable information Tooltips for additional context Toast notifications for user actions Modal dialogs for project editing Responsive table layout with proper column sizing Technical Requirements: React with TypeScript Shadcn/ui component library Lucide React icons React Hook Form for forms React Query for state management Proper TypeScript types for all data structures Component-based architecture with reusable parts Key Components to Build: Main dashboard with project table Project row component with timeline visualization Filter builder with complex conditions Project edit form Navigation and sorting controls Gate status indicators and legends Sample Data: Include mock projects with various stages, gates, team members, and project types to demonstrate all features working together. Visual Design: Professional color scheme with stage-specific colors Clear typography and spacing Intuitive icons and visual indicators Hover states and interactive elements Mobile-responsive layout This should be a fully functional prototype demonstrating enterprise-level project portfolio management capabilities.