docs(css): Add comprehensive CSS refactoring plan and documentation

Add complete planning documentation for CSS architecture refactoring project: - 7-phase implementation plan (92-120 hours) - 123 detailed tasks across all phases - Target: ~3,260 lines CSS reduction (40-50%) - Complete requirements analysis - Progress tracking system - Phase-by-phase breakdown with acceptance criteria Documentation structure: - features/README.md - Project overview and quick start - features/CSS_REFACTORING_PLAN.md - Implementation strategy - features/CSS_REFACTORING_REQUIREMENTS.md - Detailed requirements - features/PROGRESS_TRACKER.md - Live progress tracking - features/phases/*.md - 7 phase documents with tasks Ready to begin Phase 1: Forms Standardization 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-18 13:10:57 +02:00
parent e2d63d609a
commit bff37e78d8
11 changed files with 6157 additions and 0 deletions
--- a/features/CSS_REFACTORING_PLAN.md
+++ b/features/CSS_REFACTORING_PLAN.md
@@ -0,0 +1,380 @@
+# ROA2WEB CSS Refactoring - Implementation Plan
+
+**Project:** CSS Architecture Refactoring
+**Start Date:** TBD
+**Duration:** 5-6 weeks (92-120 hours)
+**Status:** Planning
+**Branch:** `feature/css-refactoring`
+
+---
+
+## Implementation Strategy
+
+### Branch Strategy
+- **Single feature branch:** `feature/css-refactoring`
+- **Commit after each phase** with detailed commit messages
+- **Final merge to main** after all phases complete and tested
+- **No intermediate merges** to avoid partial states in production
+
+### Testing Strategy
+1. **Playwright visual snapshots** - Capture baseline before Phase 1
+2. **Snapshot comparison** - After each phase completion
+3. **Manual testing checklist** - Desktop/tablet/mobile after each phase
+4. **Real device testing** - On actual mobile devices (not just browser resize)
+
+### Workflow
+```bash
+# Initial setup
+git checkout -b feature/css-refactoring
+npm run test:e2e -- --update-snapshots  # Capture baseline
+
+# For each phase
+# 1. Implement changes
+# 2. Test with snapshots
+npm run test:e2e
+# 3. Manual testing
+# 4. Commit
+git add .
+git commit -m "feat(css): Phase X - [description]"
+git push origin feature/css-refactoring
+
+# Final merge (after Phase 7)
+git checkout main
+git merge feature/css-refactoring
+git push origin main
+```
+
+---
+
+## Phase Overview
+
+| Phase | Priority | Duration | Lines Saved | Risk | Status |
+|-------|----------|----------|-------------|------|--------|
+| 1. Standardizare Formulare | 🔥 High | 10-12h | ~150 | Medium | ⏸️ Pending |
+| 2. Fundație Pattern-uri | 🏗️ Foundation | 8-10h | 0 (setup) | Low | ⏸️ Pending |
+| 3. PrimeVue Centralizare | 🎨 High | 6-8h | ~150 | Medium | ⏸️ Pending |
+| 4. Card Components | 📊 High | 16-20h | ~800 | High | ⏸️ Pending |
+| 5. DashboardView Major | 🚀 Critical | 24-32h | ~1,710 | Very High | ⏸️ Pending |
+| 6. View-uri Rămase | 📄 Medium | 16-20h | ~400 | Medium | ⏸️ Pending |
+| 7. Documentare | 📚 High | 12-16h | 0 (docs) | Low | ⏸️ Pending |
+| **TOTAL** | - | **92-120h** | **~3,260** | - | **0% Complete** |
+
+---
+
+## Detailed Phase Breakdown
+
+### Phase 1: Standardizare Formulare ⚡
+**Priority:** User-facing impact
+**Duration:** 10-12 hours
+**Files:** [See phase-1-forms.md](./phases/phase-1-forms.md)
+
+**Objectives:**
+- Eliminate inconsistent form patterns
+- Standardize all forms to use `forms.css`
+- Remove duplicate form styling
+- Create form template for future use
+
+**Key Changes:**
+- LoginView.vue: `.field` → `.form-group`
+- InvoicesView.vue: `.filter-group` → `.form-group`
+- Eliminate ~150 lines of duplicate CSS
+
+---
+
+### Phase 2: Fundație Pattern-uri Globale 🏗️
+**Priority:** Foundation for future phases
+**Duration:** 8-10 hours
+**Files:** [See phase-2-foundation.md](./phases/phase-2-foundation.md)
+
+**Objectives:**
+- Create global pattern files
+- Establish reusable component classes
+- Set up extended design tokens
+- Prepare for major refactoring
+
+**New Files Created:**
+- `assets/css/patterns/interactive.css`
+- `assets/css/patterns/dashboard.css`
+- `assets/css/patterns/animations.css`
+- `assets/css/core/tokens.css`
+- `assets/css/vendor/primevue-overrides.css`
+
+---
+
+### Phase 3: PrimeVue Centralizare 🎨
+**Priority:** Eliminate anti-patterns
+**Duration:** 6-8 hours
+**Files:** [See phase-3-primevue.md](./phases/phase-3-primevue.md)
+
+**Objectives:**
+- Move all `:deep()` overrides to global CSS
+- Eliminate `!important` from components
+- Replace hardcoded colors with design tokens
+- Achieve 0 PrimeVue overrides in components
+
+**Target:** 50+ `:deep()` instances → 0
+
+---
+
+### Phase 4: Card Components 📊
+**Priority:** High duplication area
+**Duration:** 16-20 hours
+**Files:** [See phase-4-cards.md](./phases/phase-4-cards.md)
+
+**Objectives:**
+- Extract common card patterns
+- Refactor 5 card components
+- Reduce card CSS by ~70%
+- Create reusable card classes
+
+**Components:**
+- MetricCard.vue: 331 → 80 lines
+- CashFlowMetricCard.vue: 179 → 60 lines
+- ClientiBalanceCard.vue: 260 → 90 lines
+- FurnizoriBalanceCard.vue: ~260 → 90 lines
+- TreasuryDualCard.vue: ~200 → 60 lines
+
+---
+
+### Phase 5: DashboardView Major Refactoring 🚀
+**Priority:** CRITICAL - Biggest impact
+**Duration:** 24-32 hours
+**Files:** [See phase-5-dashboard.md](./phases/phase-5-dashboard.md)
+
+**Objectives:**
+- Reduce 2,010 lines to ~300 lines (85% reduction)
+- Eliminate table style duplication
+- Consolidate 4 responsive breakpoints to 1
+- Extract all reusable patterns
+
+**⚠️ High Risk:**
+- Main dashboard view - critical functionality
+- Extensive visual regression testing required
+- Incremental approach mandatory
+
+---
+
+### Phase 6: View-uri Rămase 📄
+**Priority:** Complete standardization
+**Duration:** 16-20 hours
+**Files:** [See phase-6-views.md](./phases/phase-6-views.md)
+
+**Objectives:**
+- Apply patterns to remaining views
+- Ensure consistency across all pages
+- Eliminate view-specific duplications
+
+**Views:**
+- TelegramView.vue: 218 → 80 lines
+- BankCashRegisterView.vue
+- CacheStatsView.vue
+- Other views as needed
+
+---
+
+### Phase 7: Documentare & Finalizare 📚
+**Priority:** Long-term maintainability
+**Duration:** 12-16 hours
+**Files:** [See phase-7-documentation.md](./phases/phase-7-documentation.md)
+
+**Objectives:**
+- Create comprehensive pattern library
+- Document component styling guidelines
+- Create developer onboarding guide
+- Performance report and metrics
+
+**Deliverables:**
+- `docs/CSS_PATTERNS.md`
+- `docs/FORM_TEMPLATE.md`
+- `docs/COMPONENT_STYLING.md`
+- `docs/STYLING_GUIDELINES.md`
+- Performance comparison report
+
+---
+
+## Testing Checklist (Per Phase)
+
+### Automated Testing
+- [ ] Playwright visual regression tests pass
+- [ ] No snapshot differences (or approved differences)
+- [ ] Build completes without errors
+- [ ] No console errors in browser
+
+### Manual Testing
+- [ ] Desktop view (1920x1080) - All functionality works
+- [ ] Tablet view (768x1024) - Responsive layout correct
+- [ ] Mobile view (375x667) - Touch interactions work
+- [ ] All forms validate correctly
+- [ ] All buttons respond to clicks
+- [ ] All PrimeVue components styled correctly
+- [ ] Hover states work on desktop
+- [ ] Focus states visible (keyboard navigation)
+- [ ] Loading states display correctly
+- [ ] Error states display correctly
+
+### Browser Compatibility
+- [ ] Chrome (latest)
+- [ ] Firefox (latest)
+- [ ] Safari (latest)
+- [ ] Edge (latest)
+
+### Performance
+- [ ] CSS bundle size measured (before/after)
+- [ ] Page load time measured
+- [ ] Lighthouse score recorded
+- [ ] No performance degradation
+
+---
+
+## Progress Tracking
+
+See [PROGRESS_TRACKER.md](./PROGRESS_TRACKER.md) for detailed task-level tracking.
+
+### Overall Progress
+- **Phases Completed:** 0/7 (0%)
+- **Total Hours Spent:** 0h / 92-120h
+- **CSS Lines Eliminated:** 0 / ~3,260
+
+### Current Phase
+- **Phase:** None (Planning)
+- **Status:** Awaiting approval
+- **Next:** Phase 1 - Forms Standardization
+
+---
+
+## Rollback Plan
+
+If any phase causes critical issues:
+
+### Immediate Rollback
+```bash
+# Revert to last working commit
+git reset --hard <last-good-commit>
+git push origin feature/css-refactoring --force
+```
+
+### Phase-Specific Rollback
+```bash
+# Revert specific phase commits
+git revert <phase-commit-hash>
+git push origin feature/css-refactoring
+```
+
+### Complete Rollback
+```bash
+# Abandon feature branch
+git checkout main
+git branch -D feature/css-refactoring
+# Redeploy last stable version
+```
+
+---
+
+## Success Criteria
+
+### Code Quality
+- [ ] CSS duplication reduced from 70% to <20%
+- [ ] Zero `:deep()` PrimeVue overrides in components
+- [ ] All forms use standard `.form-group` pattern
+- [ ] Hardcoded values reduced from ~150 to <20
+
+### Performance
+- [ ] CSS bundle size reduced by 30%
+- [ ] Page load time improved by 15%
+- [ ] Lighthouse score increased by 10+ points
+
+### Functionality
+- [ ] Zero visual regressions
+- [ ] All features work identically
+- [ ] No console errors
+- [ ] All tests pass
+
+### Documentation
+- [ ] Pattern library complete
+- [ ] Developer guidelines written
+- [ ] Examples provided for all patterns
+- [ ] Onboarding documentation ready
+
+---
+
+## Communication Plan
+
+### Daily Updates
+- Progress posted in development channel
+- Blockers escalated immediately
+- Phase completion announced
+
+### Phase Reviews
+- Demo after each phase completion
+- Stakeholder approval before next phase
+- Testing results shared
+
+### Final Review
+- Comprehensive demo of all changes
+- Performance metrics presented
+- Before/after comparison
+- Approval for merge to main
+
+---
+
+## Dependencies & Blockers
+
+### Current Blockers
+- [ ] Plan approval pending
+- [ ] Testing strategy confirmation needed
+- [ ] Resource allocation required
+
+### External Dependencies
+- PrimeVue library (must remain compatible)
+- Playwright testing framework
+- Vue.js 3 framework
+
+### Internal Dependencies
+- Frontend development environment
+- Access to staging/testing environment
+- QA team availability for testing
+
+---
+
+## Timeline
+
+**Optimistic:** 5 weeks (92 hours @ 18h/week)
+**Realistic:** 6 weeks (108 hours @ 18h/week)
+**Pessimistic:** 7 weeks (120 hours @ 17h/week)
+
+### Week-by-Week Plan
+
+| Week | Phases | Hours | Deliverable |
+|------|--------|-------|-------------|
+| 1 | Phase 1 + Phase 2 | 18-22h | Forms + Foundation |
+| 2 | Phase 3 | 6-8h | PrimeVue centralized |
+| 3 | Phase 4 | 16-20h | Cards refactored |
+| 4 | Phase 5 (start) | 18-20h | Dashboard partial |
+| 5 | Phase 5 (complete) + Phase 6 | 18-20h | Dashboard + Views |
+| 6 | Phase 7 | 12-16h | Documentation |
+
+---
+
+## Approval & Sign-off
+
+### Required Approvals
+- [ ] Technical Lead - Plan review
+- [ ] Product Owner - Scope approval
+- [ ] QA Lead - Testing strategy approval
+- [ ] Development Team - Resource commitment
+
+### Sign-off
+- [ ] Plan approved for execution
+- [ ] Resources allocated
+- [ ] Timeline agreed
+- [ ] Success metrics confirmed
+
+**Approved By:** _____________
+**Date:** _____________
+**Start Date:** _____________
+
+---
+
+**Last Updated:** 2025-11-18
+**Document Version:** 1.0
+**Next Review:** After Phase 1 completion