Create comprehensive Playwright user journey tests

.gitignore

@@ -36,3 +36,4 @@ docs/machines-metadata.json
 
 # Monitoring state
 .monitoring-state.json
+playwright-report-frontend/

ANALYSIS_INDEX.md

@@ -0,0 +1,364 @@
+# React Frontend vs Astro Docs - Analysis Index
+
+**Analysis Date**: 2025-11-17  
+**Repository**: PAA (Plateforme d'Aide Administrative)  
+**Scope**: Comprehensive comparison of frontend implementations
+
+---
+
+## Documents Generated
+
+### 1. ANALYSIS_SUMMARY.md (This is where to start)
+**Length**: 330 lines | **Focus**: Executive overview  
+**Best for**: Quick understanding, decision makers, project planning
+
+**What's Inside:**
+- One-page summary of key findings
+- Critical gaps ranked by priority
+- 4 implementation options with pros/cons
+- Week-by-week implementation checklist
+- Risk assessment and mitigation
+- Success metrics and next steps
+
+**Start here if you have 10 minutes** ✓
+
+---
+
+### 2. FEATURE_MATRIX.md (Visual breakdown)
+**Length**: 394 lines | **Focus**: Visual feature comparison  
+**Best for**: Understanding what each app has, component dependency mapping
+
+**What's Inside:**
+- Visual feature trees for React and Astro
+- Feature comparison matrix (20 features scored)
+- Component dependencies and reusability
+- Quick-win migration tiers
+- Data structure alignment (90% compatible)
+- Resource estimates with hourly breakdown
+
+**Start here if you need visual clarity** ✓
+
+---
+
+### 3. MIGRATION_PRIORITIES.md (Action-oriented)
+**Length**: 324 lines | **Focus**: What to build and how  
+**Best for**: Developers, technical planning, implementation roadmap
+
+**What's Inside:**
+- 4 critical missing features with code examples
+- Priority 1 vs Priority 2 features
+- Implementation approaches for each
+- Astro-only features explanation
+- Component reusability matrix
+- Testing strategy (unit, integration, E2E)
+- Data synchronization strategy
+
+**Start here if you're implementing** ✓
+
+---
+
+### 4. FRONTEND_ASTRO_COMPARISON.md (Comprehensive reference)
+**Length**: 494 lines | **Focus**: Complete deep-dive analysis  
+**Best for**: Thorough understanding, architecture decisions, detailed planning
+
+**What's Inside:**
+- Complete routes comparison (6 vs 15+ pages)
+- Detailed React-only features (7 categories)
+- Detailed Astro-only features (8 categories)
+- Shared features breakdown
+- Component architecture differences
+- Interactive features comparison table
+- Migration recommendations
+- Technical implementation guide
+- Terminology mappings
+- Summary tables and risk analysis
+
+**Start here if you need complete understanding** ✓
+
+---
+
+## Quick Navigation Guide
+
+### I Need To...
+
+**Understand the gap quickly (5 mins)**
+→ Read: ANALYSIS_SUMMARY.md (first section)
+
+**See features side-by-side (10 mins)**
+→ Read: FEATURE_MATRIX.md (visual comparison)
+
+**Plan implementation (20 mins)**
+→ Read: MIGRATION_PRIORITIES.md + ANALYSIS_SUMMARY.md checklist
+
+**Do a deep dive (1 hour)**
+→ Read: All documents in order
+
+**Start coding (30 mins prep)**
+→ Read: MIGRATION_PRIORITIES.md + Code examples section
+
+---
+
+## Key Findings Summary
+
+### Current State: 70% Feature Overlap
+
+| Area | React | Astro | Gap |
+|------|:-----:|:-----:|-----|
+| **Interactive Features** | ✓✓✓ | ~ | Tabs, simulation, advanced search |
+| **Documentation** | ✗ | ✓✓✓ | Rules browser, Gherkin viewer |
+| **User Experience** | ✓✓ | ✓ | React more polished |
+| **Performance** | ✓ | ✓✓✓ | Astro faster loads |
+| **Developer Experience** | ✓ | ✓✓ | Astro better documented |
+
+### 4 Most Important Missing Features (87% of the gap)
+
+1. **Workflow Detail Tabs** (30% of gap)
+   - Impact: HIGH | Effort: 2-3 days
+
+2. **Advanced Search & Filter** (25% of gap)
+   - Impact: HIGH | Effort: 2-3 days
+
+3. **Enhanced Wizard** (20% of gap)
+   - Impact: MEDIUM-HIGH | Effort: 2-3 days
+
+4. **Comparison Tool Expansion** (12% of gap)
+   - Impact: MEDIUM | Effort: 1-2 days
+
+### Timeline to Feature Parity: 3-4 weeks
+(1-2 developers, 134 total dev+QA hours)
+
+---
+
+## Recommended Path Forward
+
+**Option A (Recommended)**: Enhance Astro with React islands
+- Add 4 critical components to Astro
+- Keep React code reusable
+- Best performance + SEO
+- 3-4 weeks to parity
+
+**Option B**: Unify everything on Astro
+- Full migration of React frontend
+- Single codebase
+- Better SEO
+- 5-6 weeks effort
+
+**Option C**: Keep separate
+- No migration risk
+- Higher maintenance
+- Data sync challenges
+
+---
+
+## Implementation Components Needed
+
+### Priority 1 (Must have for parity)
+```
+MachineDetailTabs.tsx      // 5-tab workflow detail interface
+WorkflowSearch.tsx         // Real-time search + multi-filter
+EnhancedWizard.tsx        // Improve existing component
+ComparisonToolExpanded.tsx // Add more comparison fields
+```
+
+### Priority 2 (Nice-to-have)
+```
+StateMachineVisualizer.tsx // State diagram visualization
+RuleSimulator.tsx          // Interactive rule condition builder
+```
+
+---
+
+## Document Map (Cross-references)
+
+```
+ANALYSIS_SUMMARY.md
+├── Critical Gaps (details in MIGRATION_PRIORITIES.md)
+├── Architecture Insights (details in FRONTEND_ASTRO_COMPARISON.md)
+├── Implementation Checklist (details in MIGRATION_PRIORITIES.md)
+└── Next Steps → Start with FEATURE_MATRIX.md
+
+FEATURE_MATRIX.md
+├── Visual Feature Trees (detailed in FRONTEND_ASTRO_COMPARISON.md)
+├── Component Dependencies (implementation in MIGRATION_PRIORITIES.md)
+├── Resource Estimates (timeline in MIGRATION_PRIORITIES.md)
+└── Data Structure Alignment (schemas in MIGRATION_PRIORITIES.md)
+
+MIGRATION_PRIORITIES.md
+├── Detailed Feature Descriptions (overview in ANALYSIS_SUMMARY.md)
+├── Implementation Code Examples (full comparison in FRONTEND_ASTRO_COMPARISON.md)
+├── Testing Strategy (details in FEATURE_MATRIX.md)
+└── Component Dependencies (visual in FEATURE_MATRIX.md)
+
+FRONTEND_ASTRO_COMPARISON.md
+├── Routes Analysis (summary in ANALYSIS_SUMMARY.md)
+├── Component Architecture (visual in FEATURE_MATRIX.md)
+├── Technical Decisions (implementation guide in MIGRATION_PRIORITIES.md)
+└── Complete Reference (for everything else)
+```
+
+---
+
+## For Different Roles
+
+### Project Manager
+**Read in this order:**
+1. ANALYSIS_SUMMARY.md (full)
+2. FEATURE_MATRIX.md (Resource Estimates section)
+3. MIGRATION_PRIORITIES.md (Feature Implementation Checklist)
+
+**Key takeaway**: 3-4 weeks, 134 dev+QA hours, Option A recommended
+
+---
+
+### Technical Lead / Architect
+**Read in this order:**
+1. ANALYSIS_SUMMARY.md (full)
+2. FEATURE_MATRIX.md (Architecture section)
+3. FRONTEND_ASTRO_COMPARISON.md (sections 5, 8, 10)
+4. MIGRATION_PRIORITIES.md (Data Synchronization Strategy)
+
+**Key takeaway**: 90% data compatibility, 4 critical components, Astro-first approach recommended
+
+---
+
+### Developer (Implementation)
+**Read in this order:**
+1. MIGRATION_PRIORITIES.md (Critical Missing Features)
+2. MIGRATION_PRIORITIES.md (Feature Implementation Checklist)
+3. MIGRATION_PRIORITIES.md (Component Reusability Matrix)
+4. FEATURE_MATRIX.md (Component Dependencies)
+5. FRONTEND_ASTRO_COMPARISON.md (sections 5, 10)
+
+**Key takeaway**: Start with MachineDetailTabs, use existing React islands, 134 hours total
+
+---
+
+### QA / Tester
+**Read in this order:**
+1. MIGRATION_PRIORITIES.md (Testing Strategy)
+2. FEATURE_MATRIX.md (Success Criteria)
+3. ANALYSIS_SUMMARY.md (Success Metrics)
+4. MIGRATION_PRIORITIES.md (Critical Missing Features)
+
+**Key takeaway**: 4 components to test, E2E for critical paths, performance benchmarking needed
+
+---
+
+## Key Statistics
+
+| Metric | Value |
+|--------|-------|
+| React routes analyzed | 6 main |
+| Astro routes analyzed | 15+ |
+| Feature overlap | ~70% |
+| Critical gaps | 4 major |
+| Components to create | 4 (Tier 1) |
+| Additional components | 2 (Tier 2) |
+| Total effort | 134 dev+QA hours |
+| Timeline | 3-4 weeks |
+| Data compatibility | 90% |
+| Recommended approach | Option A (Enhance Astro) |
+
+---
+
+## Terminology
+
+### React Terms Used in Analysis
+- **Workflow**: Administrative procedure (mapped to "Machine" in Astro)
+- **State Machine**: XState machines for procedure logic
+- **Tab Interface**: Multi-tab component pattern
+- **Islands**: Astro term for interactive components
+
+### Astro Terms Used in Analysis
+- **Machines**: Workflows/procedures (from metadata)
+- **React Islands**: Interactive React components in static HTML
+- **Build-time**: Processing that happens during `npm run build`
+- **SSG**: Static Site Generation (Astro default)
+
+---
+
+## File Locations in Repository
+
+```
+/home/user/PAA/
+├── ANALYSIS_SUMMARY.md                  ← Start here
+├── FEATURE_MATRIX.md                    ← Visual reference
+├── MIGRATION_PRIORITIES.md              ← Implementation guide
+├── FRONTEND_ASTRO_COMPARISON.md         ← Deep dive reference
+├── ANALYSIS_INDEX.md                    ← This file
+├── frontend/src/
+│   ├── App.tsx                          (React routing)
+│   ├── pages/                           (6 main pages)
+│   └── components/                      (50+ components)
+└── docs-astro/src/
+    ├── pages/                           (15+ routes)
+    └── components/                      (React islands + Astro)
+```
+
+---
+
+## Version History
+
+| Date | Version | Changes |
+|------|---------|---------|
+| 2025-11-17 | 1.0 | Initial analysis completed |
+
+---
+
+## How to Use These Documents
+
+### For a Team Meeting
+- **Duration**: 15 minutes
+- **Materials**: ANALYSIS_SUMMARY.md (print or share screen)
+- **Outcome**: Align on recommended approach and timeline
+
+### For Implementation Planning
+- **Duration**: 2-3 hours
+- **Materials**: MIGRATION_PRIORITIES.md + FEATURE_MATRIX.md
+- **Outcome**: Detailed sprint backlog, resource allocation
+
+### For Code Review
+- **Duration**: Reference as needed
+- **Materials**: MIGRATION_PRIORITIES.md (Code Examples section)
+- **Outcome**: Ensure implementations match specification
+
+### For Architecture Decisions
+- **Duration**: 1-2 hours
+- **Materials**: FRONTEND_ASTRO_COMPARISON.md (sections 5, 8)
+- **Outcome**: Confirm technical approach and data model alignment
+
+---
+
+## Common Questions Answered
+
+**Q: Can we migrate both apps quickly?**  
+A: Option A (Astro enhancement) takes 3-4 weeks. Option B (full unification) takes 5-6 weeks. See ANALYSIS_SUMMARY.md
+
+**Q: What's the most critical feature to add first?**  
+A: Workflow Detail Tabs. It's 30% of the feature gap and impacts all users. See MIGRATION_PRIORITIES.md
+
+**Q: Are the data models compatible?**  
+A: 90% compatible. Minor adjustments needed for complexity field. See FEATURE_MATRIX.md - Data Structure Alignment
+
+**Q: What about SEO and performance?**  
+A: Astro approach is better (static + islands). Both have good performance with Tailwind. See ANALYSIS_SUMMARY.md - Architecture Insights
+
+**Q: How many developers do we need?**  
+A: 1-2 developers for 3-4 weeks (Option A). See FEATURE_MATRIX.md - Resource Estimates
+
+---
+
+## Next Steps
+
+1. **Review** this index with your team (5 mins)
+2. **Read** ANALYSIS_SUMMARY.md (10 mins)
+3. **Decide** on implementation option (Option A recommended)
+4. **Start** Week 1 with MachineDetailTabs.tsx
+5. **Reference** MIGRATION_PRIORITIES.md during implementation
+
+---
+
+**For Questions**: Refer to the appropriate document or section listed above.  
+**For Implementation**: Start with MIGRATION_PRIORITIES.md.  
+**For Overview**: Start with ANALYSIS_SUMMARY.md.
+