roa2web-service-auto/features/CSS_REFACTORING_PLAN.md

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

# 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

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

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

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

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

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

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

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 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

# Revert to last working commit
git reset --hard <last-good-commit>
git push origin feature/css-refactoring --force

Phase-Specific Rollback

# Revert specific phase commits
git revert <phase-commit-hash>
git push origin feature/css-refactoring

Complete Rollback

# 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