# 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