Marius Mutu
bff37e78d8
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>
381 lines
9.8 KiB
Markdown
381 lines
9.8 KiB
Markdown
# 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
|