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>
This commit is contained in:
380
features/CSS_REFACTORING_PLAN.md
Normal file
380
features/CSS_REFACTORING_PLAN.md
Normal file
@@ -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
|
||||||
367
features/CSS_REFACTORING_REQUIREMENTS.md
Normal file
367
features/CSS_REFACTORING_REQUIREMENTS.md
Normal file
@@ -0,0 +1,367 @@
|
|||||||
|
# ROA2WEB Frontend CSS Refactoring - Requirements & Analysis
|
||||||
|
|
||||||
|
**Created:** 2025-11-18
|
||||||
|
**Status:** Planning Phase
|
||||||
|
**Priority:** High
|
||||||
|
**Estimated Effort:** 92-120 hours (5-6 weeks)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Executive Summary
|
||||||
|
|
||||||
|
The ROA2WEB Vue.js frontend has a **well-designed CSS foundation** but suffers from **severe style duplication** in component scoped styles. An estimated **70-80% of scoped styles can be eliminated** by properly utilizing the existing CSS system.
|
||||||
|
|
||||||
|
### Critical Statistics
|
||||||
|
|
||||||
|
- **Total Vue files analyzed:** 24 components (4,353 lines)
|
||||||
|
- **CSS system files:** 17 organized stylesheets
|
||||||
|
- **Estimated reduction:** ~3,260 lines of CSS (40-50%)
|
||||||
|
- **Biggest problem:** DashboardView.vue with 2,010 lines of scoped CSS
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Current State Analysis
|
||||||
|
|
||||||
|
### ✅ Strengths
|
||||||
|
|
||||||
|
1. **Professional CSS Architecture**
|
||||||
|
- Location: `/reports-app/frontend/src/assets/css/`
|
||||||
|
- 17 well-organized files (core, layout, components, utilities)
|
||||||
|
- 181 lines of design tokens in `variables.css`
|
||||||
|
- 460 lines comprehensive form system in `forms.css`
|
||||||
|
- 430 lines button system in `buttons.css`
|
||||||
|
|
||||||
|
2. **Design Tokens System**
|
||||||
|
```css
|
||||||
|
/* Excellent foundation */
|
||||||
|
--space-xs through --space-3xl /* 8 spacing values */
|
||||||
|
--text-xs through --text-4xl /* 8 typography sizes */
|
||||||
|
--color-primary, --color-success /* Semantic colors */
|
||||||
|
--shadow-sm through --shadow-xl /* 4 shadow levels */
|
||||||
|
--radius-sm through --radius-full /* Border radius scale */
|
||||||
|
```
|
||||||
|
|
||||||
|
### ❌ Critical Issues
|
||||||
|
|
||||||
|
#### 1. DashboardView.vue - THE BIGGEST PROBLEM
|
||||||
|
**File:** `src/views/DashboardView.vue`
|
||||||
|
**Lines 787-2010:** 2,010 lines of scoped CSS (47% of component)
|
||||||
|
|
||||||
|
**Problems:**
|
||||||
|
- Duplicates `containers.css` patterns
|
||||||
|
- Duplicates `cards.css` patterns
|
||||||
|
- Duplicates `tables.css` patterns
|
||||||
|
- 4 separate responsive breakpoints (600 lines)
|
||||||
|
- Loading spinner repeated (also in 3 other files)
|
||||||
|
- Table styles (400 lines) should use `tables.css`
|
||||||
|
|
||||||
|
**Target:** Reduce to ~300 lines (85% reduction = 1,710 lines eliminated)
|
||||||
|
|
||||||
|
#### 2. Card Components - Massive Duplication
|
||||||
|
|
||||||
|
| Component | Total CSS | Duplicated | Target |
|
||||||
|
|-----------|-----------|------------|--------|
|
||||||
|
| MetricCard.vue | 331 lines | ~250 lines | 80 lines |
|
||||||
|
| CashFlowMetricCard.vue | 179 lines | ~120 lines | 60 lines |
|
||||||
|
| ClientiBalanceCard.vue | 260 lines | ~170 lines | 90 lines |
|
||||||
|
| FurnizoriBalanceCard.vue | ~260 lines | ~170 lines | 90 lines |
|
||||||
|
| TreasuryDualCard.vue | ~200 lines | ~140 lines | 60 lines |
|
||||||
|
|
||||||
|
**Repeated Patterns (in all 5 files):**
|
||||||
|
```css
|
||||||
|
/* Card base styles */
|
||||||
|
.metric-card {
|
||||||
|
background: var(--color-bg);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--card-radius);
|
||||||
|
/* ... 20 more identical properties ... */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hover effects */
|
||||||
|
.metric-card:hover {
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
/* ... identical across all files ... */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sparkline containers */
|
||||||
|
.sparkline-container { /* Repeated 4 times */ }
|
||||||
|
|
||||||
|
/* Breakdown patterns */
|
||||||
|
.breakdown-header { /* Repeated 3 times */ }
|
||||||
|
|
||||||
|
/* Trend indicators */
|
||||||
|
.trend-up, .trend-down, .trend-neutral { /* Repeated 5 times */ }
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 3. Inconsistent Form Patterns
|
||||||
|
|
||||||
|
**Problem:** Each view reinvents forms differently:
|
||||||
|
|
||||||
|
| View | Field Wrapper | Label Class | Status |
|
||||||
|
|------|--------------|-------------|--------|
|
||||||
|
| LoginView.vue | `.field` | `.field-label` | ❌ Custom |
|
||||||
|
| InvoicesView.vue | `.filter-group` | `.filter-label` | ❌ Custom |
|
||||||
|
| **forms.css (correct)** | `.form-group` | `.form-label` | ✅ Standard |
|
||||||
|
|
||||||
|
**Impact:**
|
||||||
|
- Inconsistent user experience
|
||||||
|
- 3 different implementations
|
||||||
|
- forms.css (460 lines) is **underutilized**
|
||||||
|
|
||||||
|
#### 4. PrimeVue Anti-Patterns
|
||||||
|
|
||||||
|
**LoginView.vue example (lines 269-283):**
|
||||||
|
```vue
|
||||||
|
<style scoped>
|
||||||
|
:deep(.p-inputtext),
|
||||||
|
:deep(.p-password input) {
|
||||||
|
border: 2px solid #e5e7eb !important; /* Hardcoded color */
|
||||||
|
padding: 12px !important; /* Hardcoded value */
|
||||||
|
font-size: 16px !important; /* Not using --text-base */
|
||||||
|
transition: all 0.3s ease !important;
|
||||||
|
border-radius: 8px !important; /* Not using --radius-md */
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.p-inputtext:focus) {
|
||||||
|
border-color: #3b82f6 !important; /* Hardcoded primary color */
|
||||||
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Issues:**
|
||||||
|
- 50+ instances of `:deep()` with `!important`
|
||||||
|
- Hardcoded colors (#3b82f6) instead of `var(--color-primary)`
|
||||||
|
- Specificity wars
|
||||||
|
- Breaks component encapsulation
|
||||||
|
- Maintenance nightmare
|
||||||
|
|
||||||
|
#### 5. Loading Spinner Duplication
|
||||||
|
|
||||||
|
**Repeated in 4+ files:**
|
||||||
|
```css
|
||||||
|
.loading-spinner {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border: 4px solid var(--color-border);
|
||||||
|
border-top-color: var(--color-primary);
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Found in:**
|
||||||
|
- DashboardView.vue (lines 1409-1428)
|
||||||
|
- MetricCard.vue
|
||||||
|
- InvoicesView.vue
|
||||||
|
- TelegramView.vue
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Requirements
|
||||||
|
|
||||||
|
### Functional Requirements
|
||||||
|
|
||||||
|
1. **No Visual Changes**
|
||||||
|
- All refactoring must maintain identical appearance
|
||||||
|
- User experience remains unchanged
|
||||||
|
- No functionality breakage
|
||||||
|
|
||||||
|
2. **Form Standardization**
|
||||||
|
- Single form pattern across all views
|
||||||
|
- Consistent field structure: `.form-group` + `.form-label`
|
||||||
|
- Utilize existing `forms.css` (460 lines)
|
||||||
|
- Eliminate custom form implementations
|
||||||
|
|
||||||
|
3. **PrimeVue Integration**
|
||||||
|
- Centralize all PrimeVue overrides
|
||||||
|
- Eliminate `:deep()` from component scoped styles
|
||||||
|
- Use design tokens instead of hardcoded values
|
||||||
|
- Single source of truth for PrimeVue styling
|
||||||
|
|
||||||
|
4. **Pattern Reusability**
|
||||||
|
- Extract common patterns to global CSS
|
||||||
|
- Create reusable component classes
|
||||||
|
- Document patterns for future development
|
||||||
|
|
||||||
|
5. **Responsive Consistency**
|
||||||
|
- Consolidate responsive breakpoints
|
||||||
|
- Use global responsive utilities
|
||||||
|
- Reduce component-specific media queries
|
||||||
|
|
||||||
|
### Non-Functional Requirements
|
||||||
|
|
||||||
|
1. **Performance**
|
||||||
|
- CSS bundle size reduction: -30%
|
||||||
|
- Page load time improvement: -15%
|
||||||
|
- Lighthouse performance score: +10 points
|
||||||
|
|
||||||
|
2. **Maintainability**
|
||||||
|
- New component creation time: 2h → 30min
|
||||||
|
- Clear separation: global vs component-specific CSS
|
||||||
|
- Comprehensive documentation
|
||||||
|
|
||||||
|
3. **Code Quality**
|
||||||
|
- Eliminate CSS duplication: 70% → 20%
|
||||||
|
- Remove hardcoded values: ~150 → ~20 instances
|
||||||
|
- Zero `:deep()` overrides in components
|
||||||
|
- Consistent design token usage
|
||||||
|
|
||||||
|
4. **Testing**
|
||||||
|
- Visual regression tests (Playwright snapshots)
|
||||||
|
- Manual testing checklist (desktop/tablet/mobile)
|
||||||
|
- No functional regressions
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Constraints
|
||||||
|
|
||||||
|
1. **Technology Stack**
|
||||||
|
- Plain CSS only (no SCSS/SASS available)
|
||||||
|
- Vue.js 3 with scoped styles
|
||||||
|
- PrimeVue component library (saga-blue theme)
|
||||||
|
- Vite build tool
|
||||||
|
|
||||||
|
2. **Development**
|
||||||
|
- Cannot break existing functionality
|
||||||
|
- Must maintain backward compatibility
|
||||||
|
- All changes in feature branch
|
||||||
|
- Phased implementation approach
|
||||||
|
|
||||||
|
3. **Testing**
|
||||||
|
- Playwright for visual regression
|
||||||
|
- Manual testing between phases
|
||||||
|
- No automated CSS testing tools currently
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Success Metrics
|
||||||
|
|
||||||
|
### Code Metrics
|
||||||
|
|
||||||
|
| Metric | Current | Target | Measurement |
|
||||||
|
|--------|---------|--------|-------------|
|
||||||
|
| Total scoped CSS lines | ~6,000 | ~2,500 | Line count |
|
||||||
|
| DashboardView.vue CSS | 2,010 lines | 300 lines | Line count |
|
||||||
|
| CSS duplication | ~70% | ~20% | Manual audit |
|
||||||
|
| Hardcoded values | ~150 | ~20 | Grep search |
|
||||||
|
| `:deep()` overrides | ~50 | 0 | Grep search |
|
||||||
|
| Form patterns | 3 different | 1 standard | Manual review |
|
||||||
|
|
||||||
|
### Performance Metrics
|
||||||
|
|
||||||
|
| Metric | Target | Measurement |
|
||||||
|
|--------|--------|-------------|
|
||||||
|
| CSS bundle size | -30% | Build output |
|
||||||
|
| Page load time | -15% | Lighthouse |
|
||||||
|
| First Contentful Paint | -10% | Lighthouse |
|
||||||
|
| Lighthouse Performance | +10 points | Lighthouse |
|
||||||
|
|
||||||
|
### Quality Metrics
|
||||||
|
|
||||||
|
| Metric | Target | Measurement |
|
||||||
|
|--------|--------|-------------|
|
||||||
|
| Accessibility score | 95+/100 | Lighthouse |
|
||||||
|
| Visual consistency | 95+/100 | Manual review |
|
||||||
|
| Mobile responsiveness | 100/100 | Device testing |
|
||||||
|
| Cross-browser compatibility | 100/100 | BrowserStack |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Risks & Mitigation
|
||||||
|
|
||||||
|
### High Risks
|
||||||
|
|
||||||
|
| Risk | Probability | Impact | Mitigation |
|
||||||
|
|------|-------------|--------|------------|
|
||||||
|
| Visual regressions | High | High | Playwright snapshots before/after each phase |
|
||||||
|
| PrimeVue conflicts | Medium | High | Test all PrimeVue components after global overrides |
|
||||||
|
| Mobile breakage | Medium | High | Test on real devices, not just browser resize |
|
||||||
|
| DashboardView errors | High | Very High | Extensive testing, careful incremental changes |
|
||||||
|
|
||||||
|
### Medium Risks
|
||||||
|
|
||||||
|
| Risk | Probability | Impact | Mitigation |
|
||||||
|
|------|-------------|--------|------------|
|
||||||
|
| Scope creep | High | Medium | Stick to phase plan, defer enhancements |
|
||||||
|
| Incomplete testing | Medium | High | Comprehensive test checklist per phase |
|
||||||
|
| Z-index conflicts | Medium | Low | Use design tokens z-index scale consistently |
|
||||||
|
|
||||||
|
### Low Risks
|
||||||
|
|
||||||
|
| Risk | Probability | Impact | Mitigation |
|
||||||
|
|------|-------------|--------|------------|
|
||||||
|
| Performance degradation | Low | Medium | Measure CSS bundle size before/after |
|
||||||
|
| Documentation gaps | Medium | Medium | Write docs as you go, not at the end |
|
||||||
|
| Developer confusion | Medium | Low | Clear guidelines and examples |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Dependencies
|
||||||
|
|
||||||
|
### External
|
||||||
|
- PrimeVue component library (must remain compatible)
|
||||||
|
- Existing design tokens in `variables.css`
|
||||||
|
- Playwright testing framework
|
||||||
|
|
||||||
|
### Internal
|
||||||
|
- Existing CSS system in `/assets/css/`
|
||||||
|
- Vue.js component structure
|
||||||
|
- Current responsive breakpoints
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Out of Scope
|
||||||
|
|
||||||
|
The following are explicitly **NOT** included in this refactoring:
|
||||||
|
|
||||||
|
1. Adding SCSS/SASS compilation
|
||||||
|
2. Changing PrimeVue theme (saga-blue)
|
||||||
|
3. Redesigning UI/UX
|
||||||
|
4. Adding new features or functionality
|
||||||
|
5. Refactoring JavaScript/TypeScript logic
|
||||||
|
6. Database or backend changes
|
||||||
|
7. Adding CSS-in-JS libraries
|
||||||
|
8. Implementing CSS modules
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Stakeholders
|
||||||
|
|
||||||
|
- **Development Team:** Implementation and maintenance
|
||||||
|
- **End Users:** No visible changes, improved performance
|
||||||
|
- **QA Team:** Testing and validation
|
||||||
|
- **Product Owner:** Approval and sign-off
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Approval Criteria
|
||||||
|
|
||||||
|
Before proceeding to implementation:
|
||||||
|
|
||||||
|
- [ ] Plan reviewed and approved
|
||||||
|
- [ ] Phased approach agreed upon
|
||||||
|
- [ ] Testing strategy confirmed
|
||||||
|
- [ ] Timeline acceptable
|
||||||
|
- [ ] Resources allocated
|
||||||
|
- [ ] Risks acknowledged
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## References
|
||||||
|
|
||||||
|
- Analysis report: Full ULTRATHINK analysis (37,661 tokens)
|
||||||
|
- Existing CSS system: `/reports-app/frontend/src/assets/css/`
|
||||||
|
- PrimeVue docs: https://primevue.org/
|
||||||
|
- Design tokens: `assets/css/core/variables.css`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Last Updated:** 2025-11-18
|
||||||
|
**Document Version:** 1.0
|
||||||
|
**Status:** Awaiting Approval
|
||||||
465
features/PROGRESS_TRACKER.md
Normal file
465
features/PROGRESS_TRACKER.md
Normal file
@@ -0,0 +1,465 @@
|
|||||||
|
# ROA2WEB CSS Refactoring - Progress Tracker
|
||||||
|
|
||||||
|
**Last Updated:** 2025-11-18
|
||||||
|
**Overall Status:** ⏸️ Not Started (Awaiting Approval)
|
||||||
|
**Branch:** `feature/css-refactoring`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Overall Progress
|
||||||
|
|
||||||
|
```
|
||||||
|
Progress: [░░░░░░░░░░░░░░░░░░░░] 0% Complete
|
||||||
|
|
||||||
|
Phases Complete: 0/7
|
||||||
|
Tasks Complete: 0/117
|
||||||
|
Hours Spent: 0h / 92-120h
|
||||||
|
CSS Lines Eliminated: 0 / ~3,260
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Phase Status Overview
|
||||||
|
|
||||||
|
| Phase | Status | Progress | Tasks | Time | Lines Saved | Started | Completed |
|
||||||
|
|-------|--------|----------|-------|------|-------------|---------|-----------|
|
||||||
|
| **Phase 1: Forms** | ⏸️ Not Started | 0% | 0/18 | 0h/12h | 0/150 | - | - |
|
||||||
|
| **Phase 2: Foundation** | ⏸️ Not Started | 0% | 0/15 | 0h/10h | 0/0 | - | - |
|
||||||
|
| **Phase 3: PrimeVue** | ⏸️ Not Started | 0% | 0/12 | 0h/8h | 0/150 | - | - |
|
||||||
|
| **Phase 4: Cards** | ⏸️ Not Started | 0% | 0/22 | 0h/20h | 0/800 | - | - |
|
||||||
|
| **Phase 5: Dashboard** | ⏸️ Not Started | 0% | 0/28 | 0h/32h | 0/1710 | - | - |
|
||||||
|
| **Phase 6: Views** | ⏸️ Not Started | 0% | 0/16 | 0h/20h | 0/400 | - | - |
|
||||||
|
| **Phase 7: Docs** | ⏸️ Not Started | 0% | 0/12 | 0h/16h | 0/0 | - | - |
|
||||||
|
|
||||||
|
**Legend:**
|
||||||
|
- ⏸️ Not Started
|
||||||
|
- 🔄 In Progress
|
||||||
|
- ⏸️ Paused
|
||||||
|
- ✅ Complete
|
||||||
|
- ❌ Blocked
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Current Sprint
|
||||||
|
|
||||||
|
### Active Phase
|
||||||
|
**None** - Awaiting project approval
|
||||||
|
|
||||||
|
### Today's Focus
|
||||||
|
- Planning and documentation
|
||||||
|
- Awaiting approval to start Phase 1
|
||||||
|
|
||||||
|
### Blockers
|
||||||
|
- [ ] Plan approval required
|
||||||
|
- [ ] Resources allocation needed
|
||||||
|
- [ ] Testing environment confirmation
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Detailed Phase Progress
|
||||||
|
|
||||||
|
### Phase 1: Standardizare Formulare ⚡
|
||||||
|
**Status:** ⏸️ Not Started | **Progress:** 0/18 tasks (0%)
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>View Tasks (0/18 complete)</summary>
|
||||||
|
|
||||||
|
#### Setup & Preparation (0/3)
|
||||||
|
- [ ] Create feature branch `feature/css-refactoring`
|
||||||
|
- [ ] Capture Playwright baseline snapshots
|
||||||
|
- [ ] Review existing forms.css capabilities
|
||||||
|
|
||||||
|
#### LoginView.vue Refactoring (0/6)
|
||||||
|
- [ ] Update template: `.field` → `.form-group`
|
||||||
|
- [ ] Update template: `.field-label` → `.form-label`
|
||||||
|
- [ ] Remove custom form CSS (lines 234-243)
|
||||||
|
- [ ] Remove PrimeVue `:deep()` overrides (lines 269-288)
|
||||||
|
- [ ] Test login functionality
|
||||||
|
- [ ] Visual regression test
|
||||||
|
|
||||||
|
#### InvoicesView.vue Refactoring (0/5)
|
||||||
|
- [ ] Update template: `.filter-group` → `.form-group`
|
||||||
|
- [ ] Update template: `.filter-label` → `.form-label`
|
||||||
|
- [ ] Convert `.filters-row` to `.form-row`
|
||||||
|
- [ ] Remove custom filter CSS (lines 545-578)
|
||||||
|
- [ ] Visual regression test
|
||||||
|
|
||||||
|
#### Testing & Validation (0/3)
|
||||||
|
- [ ] Playwright snapshot comparison
|
||||||
|
- [ ] Manual testing all breakpoints
|
||||||
|
- [ ] Browser compatibility check
|
||||||
|
|
||||||
|
#### Documentation (0/1)
|
||||||
|
- [ ] Create form template documentation
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
|
**Time Spent:** 0h / 10-12h | **CSS Eliminated:** 0 / ~150 lines
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Phase 2: Fundație Pattern-uri Globale 🏗️
|
||||||
|
**Status:** ⏸️ Not Started | **Progress:** 0/15 tasks (0%)
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>View Tasks (0/15 complete)</summary>
|
||||||
|
|
||||||
|
#### File Creation (0/5)
|
||||||
|
- [ ] Create `assets/css/patterns/interactive.css`
|
||||||
|
- [ ] Create `assets/css/patterns/dashboard.css`
|
||||||
|
- [ ] Create `assets/css/patterns/animations.css`
|
||||||
|
- [ ] Create `assets/css/core/tokens.css`
|
||||||
|
- [ ] Create `assets/css/vendor/primevue-overrides.css`
|
||||||
|
|
||||||
|
#### Pattern Implementation (0/7)
|
||||||
|
- [ ] Implement loading spinner patterns
|
||||||
|
- [ ] Implement trend indicator patterns
|
||||||
|
- [ ] Implement collapse/expand patterns
|
||||||
|
- [ ] Implement page header patterns
|
||||||
|
- [ ] Implement section header patterns
|
||||||
|
- [ ] Implement breakdown patterns
|
||||||
|
- [ ] Implement card hover effects
|
||||||
|
|
||||||
|
#### Integration (0/2)
|
||||||
|
- [ ] Update `main.css` with new imports
|
||||||
|
- [ ] Verify no visual changes
|
||||||
|
|
||||||
|
#### Testing (0/1)
|
||||||
|
- [ ] Build verification (no errors)
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
|
**Time Spent:** 0h / 8-10h | **CSS Eliminated:** 0 lines (setup phase)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Phase 3: PrimeVue Centralizare 🎨
|
||||||
|
**Status:** ⏸️ Not Started | **Progress:** 0/12 tasks (0%)
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>View Tasks (0/12 complete)</summary>
|
||||||
|
|
||||||
|
#### Global Override Setup (0/3)
|
||||||
|
- [ ] Move input overrides to `primevue-overrides.css`
|
||||||
|
- [ ] Move button overrides to `primevue-overrides.css`
|
||||||
|
- [ ] Move datatable overrides to `primevue-overrides.css`
|
||||||
|
|
||||||
|
#### Component Cleanup (0/6)
|
||||||
|
- [ ] Remove `:deep()` from LoginView.vue
|
||||||
|
- [ ] Remove `:deep()` from InvoicesView.vue
|
||||||
|
- [ ] Remove `:deep()` from card components
|
||||||
|
- [ ] Replace hardcoded colors with design tokens
|
||||||
|
- [ ] Remove all `!important` from components
|
||||||
|
- [ ] Verify 0 `:deep()` in codebase
|
||||||
|
|
||||||
|
#### Testing (0/3)
|
||||||
|
- [ ] Test all PrimeVue components
|
||||||
|
- [ ] Playwright snapshot comparison
|
||||||
|
- [ ] Browser compatibility check
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
|
**Time Spent:** 0h / 6-8h | **CSS Eliminated:** 0 / ~150 lines
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Phase 4: Card Components 📊
|
||||||
|
**Status:** ⏸️ Not Started | **Progress:** 0/22 tasks (0%)
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>View Tasks (0/22 complete)</summary>
|
||||||
|
|
||||||
|
#### Global Pattern Extraction (0/5)
|
||||||
|
- [ ] Add base card styles to `cards.css`
|
||||||
|
- [ ] Add sparkline patterns to `dashboard.css`
|
||||||
|
- [ ] Add breakdown patterns to `dashboard.css`
|
||||||
|
- [ ] Add metric display patterns
|
||||||
|
- [ ] Add trend indicator integration
|
||||||
|
|
||||||
|
#### MetricCard.vue (0/3)
|
||||||
|
- [ ] Update template to use global classes
|
||||||
|
- [ ] Remove duplicate CSS (331 → 80 lines)
|
||||||
|
- [ ] Visual regression test
|
||||||
|
|
||||||
|
#### CashFlowMetricCard.vue (0/3)
|
||||||
|
- [ ] Update template to use global classes
|
||||||
|
- [ ] Remove duplicate CSS (179 → 60 lines)
|
||||||
|
- [ ] Visual regression test
|
||||||
|
|
||||||
|
#### ClientiBalanceCard.vue (0/3)
|
||||||
|
- [ ] Update template to use global classes
|
||||||
|
- [ ] Remove duplicate CSS (260 → 90 lines)
|
||||||
|
- [ ] Visual regression test
|
||||||
|
|
||||||
|
#### FurnizoriBalanceCard.vue (0/3)
|
||||||
|
- [ ] Update template to use global classes
|
||||||
|
- [ ] Remove duplicate CSS (~260 → 90 lines)
|
||||||
|
- [ ] Visual regression test
|
||||||
|
|
||||||
|
#### TreasuryDualCard.vue (0/3)
|
||||||
|
- [ ] Update template to use global classes
|
||||||
|
- [ ] Remove duplicate CSS (~200 → 60 lines)
|
||||||
|
- [ ] Visual regression test
|
||||||
|
|
||||||
|
#### Final Testing (0/2)
|
||||||
|
- [ ] Test all cards together
|
||||||
|
- [ ] Performance measurement
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
|
**Time Spent:** 0h / 16-20h | **CSS Eliminated:** 0 / ~800 lines
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Phase 5: DashboardView Major Refactoring 🚀
|
||||||
|
**Status:** ⏸️ Not Started | **Progress:** 0/28 tasks (0%)
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>View Tasks (0/28 complete)</summary>
|
||||||
|
|
||||||
|
#### Preparation (0/2)
|
||||||
|
- [ ] Full backup of DashboardView.vue
|
||||||
|
- [ ] Detailed analysis of all 2,010 CSS lines
|
||||||
|
|
||||||
|
#### Page Structure (0/4)
|
||||||
|
- [ ] Convert page header to global pattern
|
||||||
|
- [ ] Convert section headers to global pattern
|
||||||
|
- [ ] Simplify dashboard container layout
|
||||||
|
- [ ] Remove duplicate container CSS
|
||||||
|
|
||||||
|
#### Table Styles (0/3)
|
||||||
|
- [ ] Replace custom table CSS with `tables.css`
|
||||||
|
- [ ] Remove 400 lines of table-specific CSS
|
||||||
|
- [ ] Test table functionality
|
||||||
|
|
||||||
|
#### Stats & Metrics (0/3)
|
||||||
|
- [ ] Use metric card patterns from Phase 4
|
||||||
|
- [ ] Remove duplicate stat displays
|
||||||
|
- [ ] Test all dashboard metrics
|
||||||
|
|
||||||
|
#### Responsive Consolidation (0/6)
|
||||||
|
- [ ] Audit all 4 media query sections
|
||||||
|
- [ ] Extract common patterns to global
|
||||||
|
- [ ] Consolidate to single mobile breakpoint
|
||||||
|
- [ ] Remove 500+ lines of duplicate responsive CSS
|
||||||
|
- [ ] Test on all screen sizes
|
||||||
|
- [ ] Test on real mobile devices
|
||||||
|
|
||||||
|
#### Loading & Animations (0/3)
|
||||||
|
- [ ] Replace loading spinner with global pattern
|
||||||
|
- [ ] Use animation patterns from Phase 2
|
||||||
|
- [ ] Remove 100 lines of animation CSS
|
||||||
|
|
||||||
|
#### Testing (0/5)
|
||||||
|
- [ ] Playwright visual regression (critical)
|
||||||
|
- [ ] Desktop testing (1920x1080, 1366x768)
|
||||||
|
- [ ] Tablet testing (768x1024)
|
||||||
|
- [ ] Mobile testing (375x667, 414x896)
|
||||||
|
- [ ] All dashboard features functional
|
||||||
|
|
||||||
|
#### Validation (0/2)
|
||||||
|
- [ ] Measure CSS reduction (target: 1,710 lines)
|
||||||
|
- [ ] Performance comparison
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
|
**Time Spent:** 0h / 24-32h | **CSS Eliminated:** 0 / ~1,710 lines
|
||||||
|
|
||||||
|
⚠️ **Critical Phase:** Most complex refactoring - requires extensive testing
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Phase 6: View-uri Rămase 📄
|
||||||
|
**Status:** ⏸️ Not Started | **Progress:** 0/16 tasks (0%)
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>View Tasks (0/16 complete)</summary>
|
||||||
|
|
||||||
|
#### TelegramView.vue (0/5)
|
||||||
|
- [ ] Convert page header to global pattern
|
||||||
|
- [ ] Replace custom buttons with `buttons.css`
|
||||||
|
- [ ] Use standard card patterns
|
||||||
|
- [ ] Remove 138 lines of CSS (218 → 80)
|
||||||
|
- [ ] Visual regression test
|
||||||
|
|
||||||
|
#### BankCashRegisterView.vue (0/4)
|
||||||
|
- [ ] Audit current CSS patterns
|
||||||
|
- [ ] Apply global patterns
|
||||||
|
- [ ] Remove duplicate CSS
|
||||||
|
- [ ] Visual regression test
|
||||||
|
|
||||||
|
#### CacheStatsView.vue (0/4)
|
||||||
|
- [ ] Audit current CSS patterns
|
||||||
|
- [ ] Apply global patterns
|
||||||
|
- [ ] Remove duplicate CSS
|
||||||
|
- [ ] Visual regression test
|
||||||
|
|
||||||
|
#### Final Validation (0/3)
|
||||||
|
- [ ] All views use consistent patterns
|
||||||
|
- [ ] Playwright full suite test
|
||||||
|
- [ ] Performance measurement all views
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
|
**Time Spent:** 0h / 16-20h | **CSS Eliminated:** 0 / ~400 lines
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Phase 7: Documentare & Finalizare 📚
|
||||||
|
**Status:** ⏸️ Not Started | **Progress:** 0/12 tasks (0%)
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>View Tasks (0/12 complete)</summary>
|
||||||
|
|
||||||
|
#### Pattern Documentation (0/4)
|
||||||
|
- [ ] Create `docs/CSS_PATTERNS.md` with examples
|
||||||
|
- [ ] Create `docs/FORM_TEMPLATE.md` standard template
|
||||||
|
- [ ] Create `docs/COMPONENT_STYLING.md` guidelines
|
||||||
|
- [ ] Create `docs/STYLING_GUIDELINES.md` best practices
|
||||||
|
|
||||||
|
#### Code Documentation (0/2)
|
||||||
|
- [ ] Add JSDoc comments to CSS files
|
||||||
|
- [ ] Document design token usage
|
||||||
|
|
||||||
|
#### Performance Report (0/3)
|
||||||
|
- [ ] CSS bundle size before/after
|
||||||
|
- [ ] Lighthouse score before/after
|
||||||
|
- [ ] Page load metrics comparison
|
||||||
|
|
||||||
|
#### Final Deliverables (0/3)
|
||||||
|
- [ ] Complete pattern library
|
||||||
|
- [ ] Developer onboarding guide
|
||||||
|
- [ ] Project completion report
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
|
**Time Spent:** 0h / 12-16h | **Deliverables:** 0/4 documents
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Metrics Dashboard
|
||||||
|
|
||||||
|
### Code Quality Metrics
|
||||||
|
|
||||||
|
| Metric | Baseline | Current | Target | Progress |
|
||||||
|
|--------|----------|---------|--------|----------|
|
||||||
|
| Total scoped CSS | ~6,000 lines | ~6,000 lines | ~2,500 lines | 0% |
|
||||||
|
| DashboardView CSS | 2,010 lines | 2,010 lines | 300 lines | 0% |
|
||||||
|
| CSS duplication | ~70% | ~70% | ~20% | 0% |
|
||||||
|
| Hardcoded values | ~150 | ~150 | ~20 | 0% |
|
||||||
|
| `:deep()` overrides | ~50 | ~50 | 0 | 0% |
|
||||||
|
| Form patterns | 3 | 3 | 1 | 0% |
|
||||||
|
|
||||||
|
### Performance Metrics
|
||||||
|
|
||||||
|
| Metric | Baseline | Current | Target | Status |
|
||||||
|
|--------|----------|---------|--------|--------|
|
||||||
|
| CSS bundle size | TBD | - | -30% | ⏸️ Not measured |
|
||||||
|
| Page load time | TBD | - | -15% | ⏸️ Not measured |
|
||||||
|
| First Contentful Paint | TBD | - | -10% | ⏸️ Not measured |
|
||||||
|
| Lighthouse Performance | TBD | - | +10pts | ⏸️ Not measured |
|
||||||
|
|
||||||
|
### Time Tracking
|
||||||
|
|
||||||
|
| Category | Estimated | Actual | Variance | Status |
|
||||||
|
|----------|-----------|--------|----------|--------|
|
||||||
|
| Phase 1 | 10-12h | 0h | - | ⏸️ |
|
||||||
|
| Phase 2 | 8-10h | 0h | - | ⏸️ |
|
||||||
|
| Phase 3 | 6-8h | 0h | - | ⏸️ |
|
||||||
|
| Phase 4 | 16-20h | 0h | - | ⏸️ |
|
||||||
|
| Phase 5 | 24-32h | 0h | - | ⏸️ |
|
||||||
|
| Phase 6 | 16-20h | 0h | - | ⏸️ |
|
||||||
|
| Phase 7 | 12-16h | 0h | - | ⏸️ |
|
||||||
|
| **TOTAL** | **92-120h** | **0h** | **-** | **0%** |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Commit History
|
||||||
|
|
||||||
|
_No commits yet - project not started_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Issues & Blockers
|
||||||
|
|
||||||
|
### Current Blockers
|
||||||
|
1. **Plan Approval** - Awaiting stakeholder approval
|
||||||
|
- **Impact:** Cannot start Phase 1
|
||||||
|
- **Status:** ⏸️ Pending
|
||||||
|
- **ETA:** TBD
|
||||||
|
|
||||||
|
### Resolved Issues
|
||||||
|
_None yet_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Testing Results
|
||||||
|
|
||||||
|
### Visual Regression Tests
|
||||||
|
- **Baseline Snapshots:** Not captured
|
||||||
|
- **Last Test Run:** N/A
|
||||||
|
- **Failures:** 0
|
||||||
|
- **Status:** ⏸️ Awaiting Phase 1
|
||||||
|
|
||||||
|
### Performance Tests
|
||||||
|
- **Last Run:** N/A
|
||||||
|
- **CSS Bundle:** Not measured
|
||||||
|
- **Lighthouse:** Not measured
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Risk Assessment
|
||||||
|
|
||||||
|
### Active Risks
|
||||||
|
| Risk | Severity | Probability | Status | Mitigation |
|
||||||
|
|------|----------|-------------|--------|------------|
|
||||||
|
| Visual regressions | High | High | ⚠️ Active | Playwright snapshots |
|
||||||
|
| DashboardView breaking | Very High | Medium | ⚠️ Active | Incremental changes |
|
||||||
|
| PrimeVue conflicts | High | Medium | ⚠️ Active | Comprehensive testing |
|
||||||
|
| Timeline overrun | Medium | Medium | ⚠️ Active | Phase flexibility |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Next Steps
|
||||||
|
|
||||||
|
### Immediate Actions (Once Approved)
|
||||||
|
1. ✅ Create feature branch `feature/css-refactoring`
|
||||||
|
2. ✅ Capture Playwright baseline snapshots
|
||||||
|
3. ✅ Start Phase 1: Forms Standardization
|
||||||
|
|
||||||
|
### This Week Goals
|
||||||
|
- Complete Phase 1 (Forms)
|
||||||
|
- Complete Phase 2 (Foundation)
|
||||||
|
- Start Phase 3 (PrimeVue)
|
||||||
|
|
||||||
|
### This Sprint Goals
|
||||||
|
- Complete Phases 1-3
|
||||||
|
- Begin Phase 4 (Cards)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Notes & Observations
|
||||||
|
|
||||||
|
### 2025-11-18
|
||||||
|
- Initial project planning complete
|
||||||
|
- 117 total tasks identified across 7 phases
|
||||||
|
- Detailed requirements and plan documented
|
||||||
|
- Awaiting approval to proceed
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Approvals
|
||||||
|
|
||||||
|
### Required Sign-offs
|
||||||
|
- [ ] Technical Lead: Plan approved
|
||||||
|
- [ ] Product Owner: Scope approved
|
||||||
|
- [ ] QA Lead: Testing strategy approved
|
||||||
|
- [ ] Team: Resources committed
|
||||||
|
|
||||||
|
### Change Log
|
||||||
|
- 2025-11-18: Initial tracker created
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Last Updated:** 2025-11-18 by Claude Code
|
||||||
|
**Next Update:** Upon Phase 1 start
|
||||||
388
features/README.md
Normal file
388
features/README.md
Normal file
@@ -0,0 +1,388 @@
|
|||||||
|
# ROA2WEB Features & Planning
|
||||||
|
|
||||||
|
Acest director conține documentația detaliată pentru toate feature-urile și refactorizările majore ale proiectului ROA2WEB.
|
||||||
|
|
||||||
|
## 📁 Structură Director
|
||||||
|
|
||||||
|
```
|
||||||
|
features/
|
||||||
|
├── README.md # Acest fișier
|
||||||
|
├── CSS_REFACTORING_REQUIREMENTS.md # Cerințe detaliate CSS refactoring
|
||||||
|
├── CSS_REFACTORING_PLAN.md # Plan general implementare
|
||||||
|
├── PROGRESS_TRACKER.md # Tracker central progres (LIVE)
|
||||||
|
└── phases/ # Faze detaliate
|
||||||
|
├── phase-1-forms.md # Faza 1: Standardizare formulare (18 tasks)
|
||||||
|
├── phase-2-foundation.md # Faza 2: Fundație pattern-uri (15 tasks)
|
||||||
|
├── phase-3-primevue.md # Faza 3: PrimeVue centralizare (12 tasks)
|
||||||
|
├── phase-4-cards.md # Faza 4: Card components (22 tasks)
|
||||||
|
├── phase-5-dashboard.md # Faza 5: DashboardView major (28 tasks)
|
||||||
|
├── phase-6-views.md # Faza 6: View-uri rămase (16 tasks)
|
||||||
|
└── phase-7-documentation.md # Faza 7: Documentare (12 tasks)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 Current Project: CSS Architecture Refactoring
|
||||||
|
|
||||||
|
### Status: ⏸️ **PLANNING** (Awaiting Approval)
|
||||||
|
|
||||||
|
### Quick Stats
|
||||||
|
|
||||||
|
| Metric | Value |
|
||||||
|
|--------|-------|
|
||||||
|
| **Total Phases** | 7 |
|
||||||
|
| **Total Tasks** | 123 tasks |
|
||||||
|
| **Estimated Duration** | 5-6 weeks |
|
||||||
|
| **Estimated Effort** | 92-120 hours |
|
||||||
|
| **Target CSS Reduction** | ~3,260 lines (40-50%) |
|
||||||
|
| **Current Progress** | 0% (Not started) |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📖 How to Use This Documentation
|
||||||
|
|
||||||
|
### For Project Managers
|
||||||
|
|
||||||
|
1. **Start here:** Read `CSS_REFACTORING_PLAN.md` for high-level overview
|
||||||
|
2. **Track progress:** Monitor `PROGRESS_TRACKER.md` (updated in real-time)
|
||||||
|
3. **Review phases:** Each phase document has detailed task breakdown
|
||||||
|
4. **Check metrics:** Progress tracker shows completion percentages
|
||||||
|
|
||||||
|
### For Developers
|
||||||
|
|
||||||
|
1. **Understand requirements:** Read `CSS_REFACTORING_REQUIREMENTS.md`
|
||||||
|
2. **Find current phase:** Check `PROGRESS_TRACKER.md` → Current Sprint
|
||||||
|
3. **Get task details:** Open relevant `phases/phase-X-*.md` file
|
||||||
|
4. **Follow instructions:** Each task has:
|
||||||
|
- Status indicator
|
||||||
|
- Time estimate
|
||||||
|
- Detailed instructions
|
||||||
|
- Code examples
|
||||||
|
- Acceptance criteria
|
||||||
|
- Testing requirements
|
||||||
|
|
||||||
|
### For QA/Testing
|
||||||
|
|
||||||
|
1. **Review testing strategy:** See `CSS_REFACTORING_PLAN.md` → Testing Checklist
|
||||||
|
2. **Phase-specific tests:** Each phase document has testing section
|
||||||
|
3. **Track test results:** Update in `PROGRESS_TRACKER.md`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Quick Start
|
||||||
|
|
||||||
|
### Step 1: Approve the Plan
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Review the plan
|
||||||
|
cat features/CSS_REFACTORING_PLAN.md
|
||||||
|
|
||||||
|
# Review requirements
|
||||||
|
cat features/CSS_REFACTORING_REQUIREMENTS.md
|
||||||
|
|
||||||
|
# Approve or provide feedback
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 2: Start Phase 1
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Read Phase 1 tasks
|
||||||
|
cat features/phases/phase-1-forms.md
|
||||||
|
|
||||||
|
# Create feature branch
|
||||||
|
git checkout -b feature/css-refactoring
|
||||||
|
|
||||||
|
# Capture baseline snapshots
|
||||||
|
cd reports-app/frontend
|
||||||
|
npm run test:e2e -- --update-snapshots
|
||||||
|
|
||||||
|
# Start working on tasks
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 3: Track Progress
|
||||||
|
|
||||||
|
Update `PROGRESS_TRACKER.md` after completing each task:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
#### Task 1.1: Create Feature Branch
|
||||||
|
**Status:** ✅ Complete | **Est:** 5 min | **Actual:** 3 min
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 4: Commit After Each Phase
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# See commit message template in each phase-X-*.md file
|
||||||
|
git add .
|
||||||
|
git commit -m "feat(css): Phase 1 - ..."
|
||||||
|
git push origin feature/css-refactoring
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 Progress Tracking System
|
||||||
|
|
||||||
|
### Task Status Indicators
|
||||||
|
|
||||||
|
- ⏸️ **Not Started** - Task not begun
|
||||||
|
- 🔄 **In Progress** - Currently working on task
|
||||||
|
- ⏸️ **Paused** - Task started but blocked/paused
|
||||||
|
- ✅ **Complete** - Task finished and tested
|
||||||
|
- ❌ **Blocked** - Cannot proceed (blocker documented)
|
||||||
|
|
||||||
|
### Phase Status Indicators
|
||||||
|
|
||||||
|
- ⏸️ **Not Started** - Phase awaiting start
|
||||||
|
- 🔄 **In Progress** - Active development
|
||||||
|
- ⏸️ **Testing** - Implementation complete, testing phase
|
||||||
|
- ✅ **Complete** - All tasks complete, tested, committed
|
||||||
|
- ❌ **Blocked** - Phase blocked (see PROGRESS_TRACKER.md)
|
||||||
|
|
||||||
|
### How to Update Progress
|
||||||
|
|
||||||
|
**Option 1: Manual Update (Simple)**
|
||||||
|
Edit `PROGRESS_TRACKER.md` directly:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
### Phase 1: Standardizare Formulare ⚡
|
||||||
|
**Status:** 🔄 In Progress | **Progress:** 5/18 tasks (28%)
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>View Tasks (5/18 complete)</summary>
|
||||||
|
|
||||||
|
#### Setup & Preparation (3/3)
|
||||||
|
- [x] Create feature branch
|
||||||
|
- [x] Capture Playwright baseline snapshots
|
||||||
|
- [x] Review existing forms.css
|
||||||
|
|
||||||
|
#### LoginView.vue Refactoring (2/6)
|
||||||
|
- [x] Update template: `.field` → `.form-group`
|
||||||
|
- [x] Update template: `.field-label` → `.form-label`
|
||||||
|
- [ ] Remove custom form CSS
|
||||||
|
<!-- ... -->
|
||||||
|
```
|
||||||
|
|
||||||
|
**Option 2: Automated Script (Advanced)**
|
||||||
|
```bash
|
||||||
|
# Mark task as complete
|
||||||
|
./scripts/update-progress.sh phase-1 task-1.1 complete
|
||||||
|
|
||||||
|
# Update phase status
|
||||||
|
./scripts/update-progress.sh phase-1 status in-progress
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📋 Phase Overview
|
||||||
|
|
||||||
|
### Phase 1: Standardizare Formulare ⚡
|
||||||
|
- **Duration:** 10-12 hours
|
||||||
|
- **Tasks:** 18
|
||||||
|
- **Impact:** ~150 lines eliminated, consistent forms
|
||||||
|
- **Risk:** Medium
|
||||||
|
- **Dependencies:** None (can start immediately)
|
||||||
|
|
||||||
|
### Phase 2: Fundație Pattern-uri Globale 🏗️
|
||||||
|
- **Duration:** 8-10 hours
|
||||||
|
- **Tasks:** 15
|
||||||
|
- **Impact:** Foundation for all other phases
|
||||||
|
- **Risk:** Low
|
||||||
|
- **Dependencies:** None (parallel with Phase 1)
|
||||||
|
|
||||||
|
### Phase 3: PrimeVue Centralizare 🎨
|
||||||
|
- **Duration:** 6-8 hours
|
||||||
|
- **Tasks:** 12
|
||||||
|
- **Impact:** ~150 lines eliminated, 0 `:deep()` overrides
|
||||||
|
- **Risk:** Medium
|
||||||
|
- **Dependencies:** Phase 2 (needs primevue-overrides.css)
|
||||||
|
|
||||||
|
### Phase 4: Card Components 📊
|
||||||
|
- **Duration:** 16-20 hours
|
||||||
|
- **Tasks:** 22
|
||||||
|
- **Impact:** ~800 lines eliminated
|
||||||
|
- **Risk:** High
|
||||||
|
- **Dependencies:** Phase 2 (needs patterns), Phase 3 (needs PrimeVue)
|
||||||
|
|
||||||
|
### Phase 5: DashboardView Major Refactoring 🚀
|
||||||
|
- **Duration:** 24-32 hours
|
||||||
|
- **Tasks:** 28
|
||||||
|
- **Impact:** ~1,710 lines eliminated (85% reduction)
|
||||||
|
- **Risk:** ⚠️ VERY HIGH (most critical phase)
|
||||||
|
- **Dependencies:** Phases 2, 3, 4 (needs all foundations)
|
||||||
|
|
||||||
|
### Phase 6: View-uri Rămase 📄
|
||||||
|
- **Duration:** 16-20 hours
|
||||||
|
- **Tasks:** 16
|
||||||
|
- **Impact:** ~400 lines eliminated
|
||||||
|
- **Risk:** Medium
|
||||||
|
- **Dependencies:** Phases 1-5 (apply all learnings)
|
||||||
|
|
||||||
|
### Phase 7: Documentare & Finalizare 📚
|
||||||
|
- **Duration:** 12-16 hours
|
||||||
|
- **Tasks:** 12
|
||||||
|
- **Impact:** Complete documentation, performance report
|
||||||
|
- **Risk:** Low
|
||||||
|
- **Dependencies:** Phases 1-6 (documents all work)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔧 Tools & Scripts
|
||||||
|
|
||||||
|
### Progress Tracking
|
||||||
|
```bash
|
||||||
|
# View current progress
|
||||||
|
cat features/PROGRESS_TRACKER.md
|
||||||
|
|
||||||
|
# Update task status (manual)
|
||||||
|
vim features/PROGRESS_TRACKER.md
|
||||||
|
|
||||||
|
# Generate progress report
|
||||||
|
./scripts/generate-progress-report.sh
|
||||||
|
```
|
||||||
|
|
||||||
|
### Testing
|
||||||
|
```bash
|
||||||
|
# Run visual regression tests
|
||||||
|
cd reports-app/frontend
|
||||||
|
npm run test:e2e
|
||||||
|
|
||||||
|
# Compare snapshots
|
||||||
|
npm run test:e2e:report
|
||||||
|
|
||||||
|
# Update snapshots (after approved changes)
|
||||||
|
npm run test:e2e -- --update-snapshots
|
||||||
|
```
|
||||||
|
|
||||||
|
### Metrics
|
||||||
|
```bash
|
||||||
|
# Count CSS lines in components
|
||||||
|
find src/components src/views -name "*.vue" -exec sh -c \
|
||||||
|
'sed -n "/<style/,/<\/style>/p" {} | wc -l' \;
|
||||||
|
|
||||||
|
# Check bundle size
|
||||||
|
npm run build
|
||||||
|
ls -lh dist/assets/*.css
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📝 Document Templates
|
||||||
|
|
||||||
|
### Adding a New Phase
|
||||||
|
|
||||||
|
1. Create `features/phases/phase-X-name.md`
|
||||||
|
2. Use existing phase documents as template
|
||||||
|
3. Include:
|
||||||
|
- Objectives
|
||||||
|
- Task breakdown with time estimates
|
||||||
|
- Code examples (before/after)
|
||||||
|
- Acceptance criteria
|
||||||
|
- Testing requirements
|
||||||
|
- Commit message template
|
||||||
|
|
||||||
|
### Adding a New Feature
|
||||||
|
|
||||||
|
1. Create requirements document: `features/FEATURE_NAME_REQUIREMENTS.md`
|
||||||
|
2. Create implementation plan: `features/FEATURE_NAME_PLAN.md`
|
||||||
|
3. Create progress tracker: `features/FEATURE_NAME_PROGRESS.md`
|
||||||
|
4. Create phase documents in `features/phases/`
|
||||||
|
5. Update this README with new feature
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ Best Practices
|
||||||
|
|
||||||
|
### Documentation
|
||||||
|
|
||||||
|
- ✅ Keep PROGRESS_TRACKER.md updated daily
|
||||||
|
- ✅ Mark tasks complete immediately when done
|
||||||
|
- ✅ Document blockers in PROGRESS_TRACKER.md
|
||||||
|
- ✅ Update time estimates with actuals
|
||||||
|
- ✅ Commit progress updates separately
|
||||||
|
|
||||||
|
### Development
|
||||||
|
|
||||||
|
- ✅ Read entire phase document before starting
|
||||||
|
- ✅ Follow task order (dependencies matter)
|
||||||
|
- ✅ Test after every task
|
||||||
|
- ✅ Commit after logical groups of tasks
|
||||||
|
- ✅ Update progress tracker after each task
|
||||||
|
|
||||||
|
### Testing
|
||||||
|
|
||||||
|
- ✅ Capture Playwright snapshots before starting
|
||||||
|
- ✅ Run visual regression after each task
|
||||||
|
- ✅ Test on real devices (especially mobile)
|
||||||
|
- ✅ Browser compatibility check per phase
|
||||||
|
- ✅ Document test results in progress tracker
|
||||||
|
|
||||||
|
### Communication
|
||||||
|
|
||||||
|
- ✅ Update team on phase start/completion
|
||||||
|
- ✅ Escalate blockers immediately
|
||||||
|
- ✅ Share progress tracker link in daily standup
|
||||||
|
- ✅ Demo after major phases (3, 5, 7)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🆘 Troubleshooting
|
||||||
|
|
||||||
|
### Can't find current task?
|
||||||
|
→ Check `PROGRESS_TRACKER.md` → Current Phase → View Tasks
|
||||||
|
|
||||||
|
### Task is blocked?
|
||||||
|
→ Document blocker in PROGRESS_TRACKER.md → Issues & Blockers
|
||||||
|
→ Escalate to team lead
|
||||||
|
→ Move to next unblocked task
|
||||||
|
|
||||||
|
### Test failing?
|
||||||
|
→ Check acceptance criteria in phase document
|
||||||
|
→ Review code examples
|
||||||
|
→ Compare with before/after snippets
|
||||||
|
→ Ask team for review
|
||||||
|
|
||||||
|
### Lost in documentation?
|
||||||
|
→ Start with `CSS_REFACTORING_PLAN.md` (overview)
|
||||||
|
→ Find current phase in `PROGRESS_TRACKER.md`
|
||||||
|
→ Open that phase's document in `phases/`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📞 Contact & Support
|
||||||
|
|
||||||
|
### For Questions About:
|
||||||
|
|
||||||
|
- **Planning & Strategy:** Review `CSS_REFACTORING_PLAN.md`
|
||||||
|
- **Requirements:** Review `CSS_REFACTORING_REQUIREMENTS.md`
|
||||||
|
- **Current Status:** Check `PROGRESS_TRACKER.md`
|
||||||
|
- **Specific Tasks:** Open relevant `phases/phase-X-*.md`
|
||||||
|
- **Technical Issues:** Ask team in #frontend-css channel
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📅 Version History
|
||||||
|
|
||||||
|
| Version | Date | Description |
|
||||||
|
|---------|------|-------------|
|
||||||
|
| 1.0 | 2025-11-18 | Initial CSS Refactoring documentation created |
|
||||||
|
| | | - 7 phases planned |
|
||||||
|
| | | - 123 tasks documented |
|
||||||
|
| | | - Complete requirements analysis |
|
||||||
|
| | | - Progress tracker setup |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📜 License & Usage
|
||||||
|
|
||||||
|
This documentation is internal to ROA2WEB project.
|
||||||
|
|
||||||
|
**Usage Guidelines:**
|
||||||
|
- ✅ Use as template for future projects
|
||||||
|
- ✅ Share with team members
|
||||||
|
- ✅ Adapt for similar refactoring tasks
|
||||||
|
- ❌ Do not delete completed phase documents (archive value)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Last Updated:** 2025-11-18
|
||||||
|
**Maintained By:** Development Team
|
||||||
|
**Status:** Active Planning
|
||||||
759
features/phases/phase-1-forms.md
Normal file
759
features/phases/phase-1-forms.md
Normal file
@@ -0,0 +1,759 @@
|
|||||||
|
# Phase 1: Standardizare Formulare ⚡
|
||||||
|
|
||||||
|
**Priority:** 🔥 High (User-facing impact)
|
||||||
|
**Duration:** 10-12 hours
|
||||||
|
**Status:** ⏸️ Not Started
|
||||||
|
**Risk Level:** Medium
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Obiective
|
||||||
|
|
||||||
|
1. **Elimină pattern-uri inconsistente** - 3 pattern-uri diferite → 1 standard
|
||||||
|
2. **Utilizează forms.css existent** - 460 linii de sistem complet
|
||||||
|
3. **Șterge CSS duplicat** - ~150 linii eliminate
|
||||||
|
4. **Crează template** - Pentru formulare viitoare
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Situație Actuală
|
||||||
|
|
||||||
|
### Problem Statement
|
||||||
|
|
||||||
|
Fiecare view reinventează formulare-le diferit:
|
||||||
|
|
||||||
|
| View | Field Wrapper | Label Class | Lines CSS | Status |
|
||||||
|
|------|--------------|-------------|-----------|--------|
|
||||||
|
| LoginView.vue | `.field` | `.field-label` | 70 lines | ❌ Custom |
|
||||||
|
| InvoicesView.vue | `.filter-group` | `.filter-label` | 80 lines | ❌ Custom |
|
||||||
|
| **forms.css** | `.form-group` | `.form-label` | 460 lines | ✅ Standard NEUTILIZAT |
|
||||||
|
|
||||||
|
### Impact
|
||||||
|
- User experience inconsistent
|
||||||
|
- Duplicate code maintenance
|
||||||
|
- forms.css (460 linii) este neutilizat
|
||||||
|
- Hardcoded PrimeVue overrides cu `!important`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task Breakdown (18 tasks)
|
||||||
|
|
||||||
|
### 1. Setup & Preparation (3 tasks)
|
||||||
|
|
||||||
|
#### Task 1.1: Create Feature Branch
|
||||||
|
**Status:** ⏸️ Not Started | **Est:** 5 min
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Create and switch to feature branch
|
||||||
|
git checkout -b feature/css-refactoring
|
||||||
|
|
||||||
|
# Verify clean state
|
||||||
|
git status
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Branch created: `feature/css-refactoring`
|
||||||
|
- [ ] No uncommitted changes
|
||||||
|
- [ ] Pushed to remote
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 1.2: Capture Playwright Baseline Snapshots
|
||||||
|
**Status:** ⏸️ Not Started | **Est:** 15 min
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd reports-app/frontend
|
||||||
|
|
||||||
|
# Capture baseline screenshots before any changes
|
||||||
|
npm run test:e2e -- --update-snapshots
|
||||||
|
|
||||||
|
# Verify snapshots created
|
||||||
|
ls -la tests/e2e/**/*.png
|
||||||
|
```
|
||||||
|
|
||||||
|
**Snapshots to Capture:**
|
||||||
|
- Login page (desktop, tablet, mobile)
|
||||||
|
- Dashboard page
|
||||||
|
- Invoices page
|
||||||
|
- All form states (empty, filled, error, valid)
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Baseline snapshots captured for all views
|
||||||
|
- [ ] Snapshots committed to git
|
||||||
|
- [ ] Test suite passes with snapshots
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 1.3: Review Existing forms.css
|
||||||
|
**Status:** ⏸️ Not Started | **Est:** 30 min
|
||||||
|
|
||||||
|
**File:** `reports-app/frontend/src/assets/css/components/forms.css`
|
||||||
|
|
||||||
|
**Review:**
|
||||||
|
- [ ] Read all 460 lines
|
||||||
|
- [ ] Document available classes:
|
||||||
|
- `.form` - Form container
|
||||||
|
- `.form-group` - Field wrapper
|
||||||
|
- `.form-label` - Label styling
|
||||||
|
- `.form-input` - Input styling
|
||||||
|
- `.form-row` - Horizontal layout
|
||||||
|
- `.form-error` - Error message
|
||||||
|
- `.form-help` - Help text
|
||||||
|
- [ ] Note validation states: `.valid`, `.invalid`
|
||||||
|
- [ ] Understand responsive behavior
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] All available classes documented
|
||||||
|
- [ ] Pattern examples identified
|
||||||
|
- [ ] Ready to apply to components
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2. LoginView.vue Refactoring (6 tasks)
|
||||||
|
|
||||||
|
**File:** `reports-app/frontend/src/views/LoginView.vue`
|
||||||
|
|
||||||
|
#### Task 2.1: Update Template - Field Wrapper
|
||||||
|
**Status:** ⏸️ Not Started | **Est:** 20 min
|
||||||
|
|
||||||
|
**Current (lines 95-106):**
|
||||||
|
```vue
|
||||||
|
<div class="field">
|
||||||
|
<label for="username" class="field-label">Utilizator</label>
|
||||||
|
<InputText
|
||||||
|
id="username"
|
||||||
|
v-model="credentials.username"
|
||||||
|
placeholder="Introduceți numele de utilizator"
|
||||||
|
:class="{ 'p-invalid': formErrors.username }"
|
||||||
|
class="w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Updated:**
|
||||||
|
```vue
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="username" class="form-label required">Utilizator</label>
|
||||||
|
<InputText
|
||||||
|
id="username"
|
||||||
|
v-model="credentials.username"
|
||||||
|
placeholder="Introduceți numele de utilizator"
|
||||||
|
:class="{ 'invalid': formErrors.username }"
|
||||||
|
class="form-input w-full"
|
||||||
|
/>
|
||||||
|
<span v-if="formErrors.username" class="form-error">
|
||||||
|
{{ formErrors.username }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Changes:**
|
||||||
|
- `.field` → `.form-group`
|
||||||
|
- `.field-label` → `.form-label` (with `.required` for required fields)
|
||||||
|
- `p-invalid` → `invalid` (forms.css class)
|
||||||
|
- Add `.form-input` to InputText
|
||||||
|
- Add `.form-error` for error messages
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] All form fields updated
|
||||||
|
- [ ] Error messages use `.form-error`
|
||||||
|
- [ ] No custom field wrapper classes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 2.2: Update Template - Password Field
|
||||||
|
**Status:** ⏸️ Not Started | **Est:** 15 min
|
||||||
|
|
||||||
|
**Current:**
|
||||||
|
```vue
|
||||||
|
<div class="field">
|
||||||
|
<label for="password" class="field-label">Parolă</label>
|
||||||
|
<Password
|
||||||
|
id="password"
|
||||||
|
v-model="credentials.password"
|
||||||
|
:feedback="false"
|
||||||
|
toggleMask
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Updated:**
|
||||||
|
```vue
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="password" class="form-label required">Parolă</label>
|
||||||
|
<Password
|
||||||
|
id="password"
|
||||||
|
v-model="credentials.password"
|
||||||
|
:feedback="false"
|
||||||
|
toggleMask
|
||||||
|
:class="{ 'invalid': formErrors.password }"
|
||||||
|
class="w-full"
|
||||||
|
/>
|
||||||
|
<span v-if="formErrors.password" class="form-error">
|
||||||
|
{{ formErrors.password }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Password field uses `.form-group`
|
||||||
|
- [ ] Label uses `.form-label required`
|
||||||
|
- [ ] Error handling consistent
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 2.3: Remove Custom Form CSS
|
||||||
|
**Status:** ⏸️ Not Started | **Est:** 10 min
|
||||||
|
|
||||||
|
**Delete Lines 234-243:**
|
||||||
|
```css
|
||||||
|
/* DELETE THIS - forms.css provides these */
|
||||||
|
.field {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Lines 234-243 deleted
|
||||||
|
- [ ] No `.field` or `.field-label` in scoped styles
|
||||||
|
- [ ] Form still renders correctly
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 2.4: Remove PrimeVue Deep Overrides
|
||||||
|
**Status:** ⏸️ Not Started | **Est:** 15 min
|
||||||
|
|
||||||
|
**Delete Lines 269-288:**
|
||||||
|
```css
|
||||||
|
/* DELETE THIS - Will be moved to global primevue-overrides.css in Phase 3 */
|
||||||
|
:deep(.p-inputtext),
|
||||||
|
:deep(.p-password input) {
|
||||||
|
border: 2px solid #e5e7eb !important;
|
||||||
|
padding: 12px !important;
|
||||||
|
font-size: 16px !important;
|
||||||
|
transition: all 0.3s ease !important;
|
||||||
|
border-radius: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.p-inputtext:focus),
|
||||||
|
:deep(.p-password input:focus) {
|
||||||
|
border-color: #3b82f6 !important;
|
||||||
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
|
||||||
|
outline: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ... more :deep() rules ... */
|
||||||
|
```
|
||||||
|
|
||||||
|
**Note:** These will be added to global `primevue-overrides.css` in Phase 3.
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] All `:deep()` rules removed from LoginView.vue
|
||||||
|
- [ ] No `!important` in scoped styles
|
||||||
|
- [ ] Form inputs still styled (via forms.css)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 2.5: Test Login Functionality
|
||||||
|
**Status:** ⏸️ Not Started | **Est:** 30 min
|
||||||
|
|
||||||
|
**Test Checklist:**
|
||||||
|
- [ ] Login form renders correctly
|
||||||
|
- [ ] All fields are accessible
|
||||||
|
- [ ] Validation works on blur
|
||||||
|
- [ ] Error messages display correctly
|
||||||
|
- [ ] Form submission works
|
||||||
|
- [ ] Success login redirects to dashboard
|
||||||
|
- [ ] Failed login shows error
|
||||||
|
- [ ] Keyboard navigation works (Tab through fields)
|
||||||
|
- [ ] Enter key submits form
|
||||||
|
|
||||||
|
**Test Scenarios:**
|
||||||
|
1. Empty form submission → validation errors
|
||||||
|
2. Invalid credentials → API error message
|
||||||
|
3. Valid credentials → successful login
|
||||||
|
4. Field focus states visible
|
||||||
|
5. Error states visible
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] All test scenarios pass
|
||||||
|
- [ ] No functionality broken
|
||||||
|
- [ ] No console errors
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 2.6: Visual Regression Test
|
||||||
|
**Status:** ⏸️ Not Started | **Est:** 15 min
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Run Playwright tests
|
||||||
|
npm run test:e2e -- tests/e2e/auth/login.spec.ts
|
||||||
|
|
||||||
|
# Check for visual differences
|
||||||
|
npm run test:e2e:report
|
||||||
|
```
|
||||||
|
|
||||||
|
**Visual Checks:**
|
||||||
|
- [ ] Login form layout identical
|
||||||
|
- [ ] Field spacing correct
|
||||||
|
- [ ] Label styling identical
|
||||||
|
- [ ] Error message styling identical
|
||||||
|
- [ ] Button styling unchanged
|
||||||
|
- [ ] Responsive layout works (mobile, tablet)
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Playwright tests pass
|
||||||
|
- [ ] No unexpected visual differences
|
||||||
|
- [ ] Any differences documented and approved
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 3. InvoicesView.vue Refactoring (5 tasks)
|
||||||
|
|
||||||
|
**File:** `reports-app/frontend/src/views/InvoicesView.vue`
|
||||||
|
|
||||||
|
#### Task 3.1: Update Template - Filter Groups
|
||||||
|
**Status:** ⏸️ Not Started | **Est:** 30 min
|
||||||
|
|
||||||
|
**Current (lines 45-60):**
|
||||||
|
```vue
|
||||||
|
<div class="filters-container">
|
||||||
|
<div class="filters-row">
|
||||||
|
<div class="filter-group">
|
||||||
|
<label class="filter-label">Tip Factură</label>
|
||||||
|
<Dropdown
|
||||||
|
v-model="filters.type"
|
||||||
|
:options="invoiceTypes"
|
||||||
|
option-label="label"
|
||||||
|
option-value="value"
|
||||||
|
placeholder="Tip factură"
|
||||||
|
@change="handleFilterChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Updated:**
|
||||||
|
```vue
|
||||||
|
<div class="form">
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-col">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Tip Factură</label>
|
||||||
|
<Dropdown
|
||||||
|
v-model="filters.type"
|
||||||
|
:options="invoiceTypes"
|
||||||
|
option-label="label"
|
||||||
|
option-value="value"
|
||||||
|
placeholder="Tip factură"
|
||||||
|
@change="handleFilterChange"
|
||||||
|
class="w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Changes:**
|
||||||
|
- `.filters-container` → `.form`
|
||||||
|
- `.filters-row` → `.form-row`
|
||||||
|
- `.filter-group` → `.form-group` (inside `.form-col`)
|
||||||
|
- `.filter-label` → `.form-label`
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] All filter fields updated
|
||||||
|
- [ ] Grid layout preserved (form-row + form-col)
|
||||||
|
- [ ] No custom filter classes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 3.2: Update Date Range Filters
|
||||||
|
**Status:** ⏸️ Not Started | **Est:** 20 min
|
||||||
|
|
||||||
|
**Current:**
|
||||||
|
```vue
|
||||||
|
<div class="filter-group">
|
||||||
|
<label class="filter-label">De la</label>
|
||||||
|
<Calendar
|
||||||
|
v-model="filters.dateFrom"
|
||||||
|
dateFormat="dd/mm/yy"
|
||||||
|
placeholder="Data început"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="filter-group">
|
||||||
|
<label class="filter-label">Până la</label>
|
||||||
|
<Calendar
|
||||||
|
v-model="filters.dateTo"
|
||||||
|
dateFormat="dd/mm/yy"
|
||||||
|
placeholder="Data sfârșit"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Updated:**
|
||||||
|
```vue
|
||||||
|
<div class="form-col">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">De la</label>
|
||||||
|
<Calendar
|
||||||
|
v-model="filters.dateFrom"
|
||||||
|
dateFormat="dd/mm/yy"
|
||||||
|
placeholder="Data început"
|
||||||
|
class="w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-col">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Până la</label>
|
||||||
|
<Calendar
|
||||||
|
v-model="filters.dateTo"
|
||||||
|
dateFormat="dd/mm/yy"
|
||||||
|
placeholder="Data sfârșit"
|
||||||
|
class="w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Date pickers use standard form classes
|
||||||
|
- [ ] Side-by-side layout preserved
|
||||||
|
- [ ] Calendar styling works
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 3.3: Remove Custom Filter CSS
|
||||||
|
**Status:** ⏸️ Not Started | **Est:** 15 min
|
||||||
|
|
||||||
|
**Delete Lines 545-578:**
|
||||||
|
```css
|
||||||
|
/* DELETE THIS */
|
||||||
|
.filters-container {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-label {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Note:** forms.css provides `.form-row` with grid layout.
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Custom filter CSS deleted
|
||||||
|
- [ ] Form layout still correct via forms.css
|
||||||
|
- [ ] Grid behavior preserved
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 3.4: Remove Filter-Specific Overrides
|
||||||
|
**Status:** ⏸️ Not Started | **Est:** 10 min
|
||||||
|
|
||||||
|
**Find and remove any filter-specific PrimeVue overrides:**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Search for filter-related :deep() in InvoicesView.vue
|
||||||
|
grep -n ":deep" reports-app/frontend/src/views/InvoicesView.vue
|
||||||
|
```
|
||||||
|
|
||||||
|
Remove any found overrides (will be centralized in Phase 3).
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] No `:deep()` for filter components
|
||||||
|
- [ ] No hardcoded filter styling
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 3.5: Visual Regression Test
|
||||||
|
**Status:** ⏸️ Not Started | **Est:** 20 min
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Run invoice tests
|
||||||
|
npm run test:e2e -- tests/e2e/invoices/
|
||||||
|
|
||||||
|
# Check snapshots
|
||||||
|
npm run test:e2e:report
|
||||||
|
```
|
||||||
|
|
||||||
|
**Visual Checks:**
|
||||||
|
- [ ] Filter card layout identical
|
||||||
|
- [ ] Filter field alignment correct
|
||||||
|
- [ ] Grid layout responsive
|
||||||
|
- [ ] Date pickers styled correctly
|
||||||
|
- [ ] Dropdown styling correct
|
||||||
|
|
||||||
|
**Functional Checks:**
|
||||||
|
- [ ] All filters work
|
||||||
|
- [ ] Filter changes trigger data reload
|
||||||
|
- [ ] Clear filters works
|
||||||
|
- [ ] Filter combinations work
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Playwright tests pass
|
||||||
|
- [ ] No visual regressions
|
||||||
|
- [ ] All filters functional
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4. Testing & Validation (3 tasks)
|
||||||
|
|
||||||
|
#### Task 4.1: Playwright Snapshot Comparison
|
||||||
|
**Status:** ⏸️ Not Started | **Est:** 30 min
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Run full test suite
|
||||||
|
npm run test:e2e
|
||||||
|
|
||||||
|
# Generate report
|
||||||
|
npm run test:e2e:report
|
||||||
|
|
||||||
|
# Open report
|
||||||
|
npx playwright show-report
|
||||||
|
```
|
||||||
|
|
||||||
|
**Compare:**
|
||||||
|
- [ ] Login page (desktop, tablet, mobile)
|
||||||
|
- [ ] Invoices filter section
|
||||||
|
- [ ] All form states (empty, filled, error, valid)
|
||||||
|
|
||||||
|
**Document any differences:**
|
||||||
|
- Expected differences: None (should be pixel-perfect)
|
||||||
|
- Acceptable differences: Font rendering variations
|
||||||
|
- Unacceptable differences: Layout shifts, color changes, missing elements
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] All visual regression tests pass
|
||||||
|
- [ ] Any differences documented and approved
|
||||||
|
- [ ] Screenshots archived
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 4.2: Manual Testing All Breakpoints
|
||||||
|
**Status:** ⏸️ Not Started | **Est:** 45 min
|
||||||
|
|
||||||
|
**Desktop Testing (1920x1080):**
|
||||||
|
- [ ] Login form centered and styled
|
||||||
|
- [ ] Invoice filters in grid layout
|
||||||
|
- [ ] All fields accessible
|
||||||
|
- [ ] Hover states work
|
||||||
|
- [ ] Focus states visible
|
||||||
|
|
||||||
|
**Tablet Testing (768x1024):**
|
||||||
|
- [ ] Login form responsive
|
||||||
|
- [ ] Filter grid adapts to tablet
|
||||||
|
- [ ] Touch targets adequate (min 44px)
|
||||||
|
- [ ] No horizontal scroll
|
||||||
|
|
||||||
|
**Mobile Testing (375x667):**
|
||||||
|
- [ ] Login form full-width
|
||||||
|
- [ ] Filters stack vertically
|
||||||
|
- [ ] Font size 16px (no zoom on iOS)
|
||||||
|
- [ ] Virtual keyboard doesn't break layout
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] All breakpoints tested
|
||||||
|
- [ ] Forms responsive on all devices
|
||||||
|
- [ ] No layout breaks
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 4.3: Browser Compatibility Check
|
||||||
|
**Status:** ⏸️ Not Started | **Est:** 30 min
|
||||||
|
|
||||||
|
**Test on:**
|
||||||
|
- [ ] Chrome (latest) - Primary browser
|
||||||
|
- [ ] Firefox (latest)
|
||||||
|
- [ ] Safari (latest) - macOS/iOS
|
||||||
|
- [ ] Edge (latest)
|
||||||
|
|
||||||
|
**Check:**
|
||||||
|
- Form layout identical
|
||||||
|
- CSS variables supported
|
||||||
|
- Flexbox/Grid working
|
||||||
|
- Focus outlines visible
|
||||||
|
- No console errors
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Forms work on all browsers
|
||||||
|
- [ ] Visual consistency across browsers
|
||||||
|
- [ ] No JavaScript errors
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 5. Documentation (1 task)
|
||||||
|
|
||||||
|
#### Task 5.1: Create Form Template Documentation
|
||||||
|
**Status:** ⏸️ Not Started | **Est:** 1 hour
|
||||||
|
|
||||||
|
**Create:** `docs/FORM_TEMPLATE.md`
|
||||||
|
|
||||||
|
**Content:**
|
||||||
|
1. Standard form structure
|
||||||
|
2. Field types (text, password, dropdown, date)
|
||||||
|
3. Validation pattern
|
||||||
|
4. Error handling
|
||||||
|
5. Responsive layout
|
||||||
|
6. Accessibility guidelines
|
||||||
|
|
||||||
|
**Template Example:**
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<form @submit.prevent="handleSubmit" class="form">
|
||||||
|
<!-- Single field -->
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="field" class="form-label required">Label</label>
|
||||||
|
<input
|
||||||
|
id="field"
|
||||||
|
v-model="formData.field"
|
||||||
|
type="text"
|
||||||
|
class="form-input"
|
||||||
|
:class="{ 'invalid': errors.field }"
|
||||||
|
/>
|
||||||
|
<span v-if="errors.field" class="form-error">
|
||||||
|
{{ errors.field }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Horizontal fields -->
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-col">
|
||||||
|
<!-- Field 1 -->
|
||||||
|
</div>
|
||||||
|
<div class="form-col">
|
||||||
|
<!-- Field 2 -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Form actions -->
|
||||||
|
<div class="form-actions">
|
||||||
|
<button type="submit" class="btn btn-primary">
|
||||||
|
Submit
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Template documented with examples
|
||||||
|
- [ ] All field types covered
|
||||||
|
- [ ] Validation pattern explained
|
||||||
|
- [ ] Accessibility notes included
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Completion Criteria
|
||||||
|
|
||||||
|
### Code Quality
|
||||||
|
- [ ] Zero custom form wrapper classes (`.field`, `.filter-group`)
|
||||||
|
- [ ] All forms use `.form-group` + `.form-label`
|
||||||
|
- [ ] No `:deep()` PrimeVue overrides in components
|
||||||
|
- [ ] ~150 lines of CSS eliminated
|
||||||
|
|
||||||
|
### Functionality
|
||||||
|
- [ ] Login works identically
|
||||||
|
- [ ] Invoice filters work identically
|
||||||
|
- [ ] All validation works
|
||||||
|
- [ ] No console errors
|
||||||
|
|
||||||
|
### Testing
|
||||||
|
- [ ] Playwright visual regression tests pass
|
||||||
|
- [ ] Manual testing complete (all breakpoints)
|
||||||
|
- [ ] Browser compatibility verified
|
||||||
|
|
||||||
|
### Documentation
|
||||||
|
- [ ] Form template created
|
||||||
|
- [ ] Pattern documented
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Files Modified
|
||||||
|
|
||||||
|
1. `reports-app/frontend/src/views/LoginView.vue`
|
||||||
|
- Template: Updated field wrappers and labels
|
||||||
|
- CSS: Deleted lines 234-243, 269-288 (~90 lines)
|
||||||
|
|
||||||
|
2. `reports-app/frontend/src/views/InvoicesView.vue`
|
||||||
|
- Template: Updated filter structure
|
||||||
|
- CSS: Deleted lines 545-578 (~80 lines)
|
||||||
|
|
||||||
|
3. `docs/FORM_TEMPLATE.md` (new file)
|
||||||
|
- Standard form template and guidelines
|
||||||
|
|
||||||
|
**Total:** 2 files modified, 1 file created, ~150 lines deleted
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Commit Message
|
||||||
|
|
||||||
|
```
|
||||||
|
feat(css): Phase 1 - Standardize form patterns across views
|
||||||
|
|
||||||
|
BREAKING: None (visual changes only, no API changes)
|
||||||
|
|
||||||
|
Changes:
|
||||||
|
- Standardize LoginView.vue to use forms.css patterns
|
||||||
|
- Standardize InvoicesView.vue filter forms
|
||||||
|
- Remove ~150 lines of duplicate form CSS
|
||||||
|
- Eliminate custom form wrapper classes
|
||||||
|
- Create standard form template documentation
|
||||||
|
|
||||||
|
Impact:
|
||||||
|
- Consistent form UX across application
|
||||||
|
- Reduced CSS duplication (70% → 65%)
|
||||||
|
- Cleaner component code
|
||||||
|
- forms.css (460 lines) now utilized
|
||||||
|
|
||||||
|
Testing:
|
||||||
|
- ✅ Playwright visual regression tests pass
|
||||||
|
- ✅ Manual testing on desktop/tablet/mobile
|
||||||
|
- ✅ Browser compatibility verified (Chrome/Firefox/Safari/Edge)
|
||||||
|
- ✅ All form functionality preserved
|
||||||
|
|
||||||
|
Files:
|
||||||
|
- Modified: LoginView.vue, InvoicesView.vue
|
||||||
|
- Created: docs/FORM_TEMPLATE.md
|
||||||
|
- CSS eliminated: ~150 lines
|
||||||
|
|
||||||
|
Refs: #CSS-REFACTORING Phase 1/7
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Next Phase
|
||||||
|
|
||||||
|
**Phase 2:** Fundație Pattern-uri Globale
|
||||||
|
- Create global pattern files
|
||||||
|
- Prepare for major refactoring
|
||||||
|
- See: [phase-2-foundation.md](./phase-2-foundation.md)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Created:** 2025-11-18
|
||||||
|
**Last Updated:** 2025-11-18
|
||||||
|
**Status:** ⏸️ Awaiting Start
|
||||||
730
features/phases/phase-2-foundation.md
Normal file
730
features/phases/phase-2-foundation.md
Normal file
@@ -0,0 +1,730 @@
|
|||||||
|
# Phase 2: Fundație Pattern-uri Globale 🏗️
|
||||||
|
|
||||||
|
**Priority:** Foundation pentru future phases
|
||||||
|
**Duration:** 8-10 hours
|
||||||
|
**Status:** ⏸️ Not Started
|
||||||
|
**Risk Level:** Low (additive changes only)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Obiective
|
||||||
|
|
||||||
|
1. **Creare fișiere pattern globale** - 5 fișiere CSS noi
|
||||||
|
2. **Extract pattern-uri repetate** - Loading spinners, trends, breakdowns
|
||||||
|
3. **Design tokens extinse** - Card-specific, animations, interactivity
|
||||||
|
4. **PrimeVue overrides centralizate** - Pregătire pentru Phase 3
|
||||||
|
5. **Zero modificări vizuale** - Setup fără impact
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task Breakdown (15 tasks)
|
||||||
|
|
||||||
|
### 1. File Creation (5 tasks)
|
||||||
|
|
||||||
|
#### Task 1.1: Create interactive.css
|
||||||
|
**Status:** ⏸️ | **Est:** 90 min
|
||||||
|
|
||||||
|
**File:** `reports-app/frontend/src/assets/css/patterns/interactive.css`
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* Interactive Patterns - ROA2WEB */
|
||||||
|
|
||||||
|
/* ===== Loading Spinners ===== */
|
||||||
|
.loading-spinner {
|
||||||
|
width: var(--spinner-size, 40px);
|
||||||
|
height: var(--spinner-size, 40px);
|
||||||
|
border: 4px solid var(--color-border);
|
||||||
|
border-top-color: var(--color-primary);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-spinner-sm {
|
||||||
|
--spinner-size: 24px;
|
||||||
|
border-width: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-spinner-lg {
|
||||||
|
--spinner-size: 56px;
|
||||||
|
border-width: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Trend Indicators ===== */
|
||||||
|
.trend {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-xs);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
.trend-up {
|
||||||
|
color: var(--color-success);
|
||||||
|
}
|
||||||
|
|
||||||
|
.trend-down {
|
||||||
|
color: var(--color-error);
|
||||||
|
}
|
||||||
|
|
||||||
|
.trend-neutral {
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.trend-icon {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Collapse/Expand Patterns ===== */
|
||||||
|
.collapsible-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
padding: var(--space-sm);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
transition: background-color var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible-header:hover {
|
||||||
|
background: var(--color-bg-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse-icon {
|
||||||
|
font-size: 0.625rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
transition: transform var(--transition-fast);
|
||||||
|
display: inline-block;
|
||||||
|
width: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse-icon.expanded {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Card Hover Effects ===== */
|
||||||
|
.card-hover {
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-hover:hover {
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
transform: translateY(var(--hover-lift, -2px));
|
||||||
|
border-color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Sparkline Containers ===== */
|
||||||
|
.sparkline-container {
|
||||||
|
width: 100%;
|
||||||
|
background: var(--color-bg-secondary);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
padding: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sparkline-chart {
|
||||||
|
width: 100%;
|
||||||
|
height: var(--sparkline-height, 80px);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sparkline-chart-lg {
|
||||||
|
--sparkline-height: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sparkline-canvas {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] File created in correct location
|
||||||
|
- [ ] All patterns documented with comments
|
||||||
|
- [ ] CSS variables used throughout
|
||||||
|
- [ ] No hardcoded values
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 1.2: Create dashboard.css
|
||||||
|
**Status:** ⏸️ | **Est:** 2 hours
|
||||||
|
|
||||||
|
**File:** `reports-app/frontend/src/assets/css/patterns/dashboard.css`
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* Dashboard Patterns - ROA2WEB */
|
||||||
|
|
||||||
|
/* ===== Page Headers ===== */
|
||||||
|
.page-header {
|
||||||
|
margin-bottom: var(--space-xl);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
margin: 0 0 var(--space-sm) 0;
|
||||||
|
font-size: var(--text-3xl);
|
||||||
|
font-weight: var(--font-bold);
|
||||||
|
color: var(--color-text);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-subtitle {
|
||||||
|
margin: 0;
|
||||||
|
font-size: var(--text-base);
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Section Structure ===== */
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: var(--space-lg);
|
||||||
|
background: var(--color-bg-secondary);
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: var(--text-xl);
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
color: var(--color-text);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-controls {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-md);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Metrics Grid ===== */
|
||||||
|
.metrics-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: var(--space-lg);
|
||||||
|
margin-bottom: var(--space-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.metrics-row {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Breakdown Patterns ===== */
|
||||||
|
.breakdown-section {
|
||||||
|
padding-top: var(--space-lg);
|
||||||
|
border-top: 1px solid var(--color-border);
|
||||||
|
margin-top: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.breakdown-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: var(--space-sm) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breakdown-label {
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
.breakdown-value {
|
||||||
|
font-size: var(--text-base);
|
||||||
|
color: var(--color-text);
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
font-family: var(--font-mono, monospace);
|
||||||
|
}
|
||||||
|
|
||||||
|
.breakdown-subitems {
|
||||||
|
padding-left: var(--space-lg);
|
||||||
|
margin-top: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.breakdown-subitem {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: var(--space-xs) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breakdown-sublabel {
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.breakdown-subvalue {
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
font-family: var(--font-mono, monospace);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] All dashboard patterns defined
|
||||||
|
- [ ] Responsive grid included
|
||||||
|
- [ ] Breakdown patterns complete
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 1.3: Create animations.css
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
|
||||||
|
**File:** `reports-app/frontend/src/assets/css/patterns/animations.css`
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* Animations - ROA2WEB */
|
||||||
|
|
||||||
|
/* Slide Down Animation */
|
||||||
|
@keyframes slideDown {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-down {
|
||||||
|
animation: slideDown var(--duration-fast) ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fade In Animation */
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-in {
|
||||||
|
animation: fadeIn var(--duration-normal) ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Slide In From Right */
|
||||||
|
@keyframes slideInRight {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-in-right {
|
||||||
|
animation: slideInRight var(--duration-normal) ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pulse Animation */
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.5; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.pulse {
|
||||||
|
animation: pulse var(--duration-slower) ease-in-out infinite;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Common animations defined
|
||||||
|
- [ ] Duration variables used
|
||||||
|
- [ ] Utility classes created
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 1.4: Create tokens.css
|
||||||
|
**Status:** ⏸️ | **Est:** 45 min
|
||||||
|
|
||||||
|
**File:** `reports-app/frontend/src/assets/css/core/tokens.css`
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* Extended Design Tokens - ROA2WEB */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
/* ===== Card Tokens ===== */
|
||||||
|
--card-padding: var(--space-lg);
|
||||||
|
--card-padding-sm: var(--space-md);
|
||||||
|
--card-padding-lg: var(--space-xl);
|
||||||
|
--card-gap: var(--space-md);
|
||||||
|
--card-min-height: 280px;
|
||||||
|
|
||||||
|
/* ===== Typography Tokens ===== */
|
||||||
|
--value-size: 1.5rem;
|
||||||
|
--value-size-lg: 2rem;
|
||||||
|
--label-size: 0.875rem;
|
||||||
|
--sublabel-size: 0.8125rem;
|
||||||
|
|
||||||
|
/* ===== Interactive Tokens ===== */
|
||||||
|
--hover-lift: -2px;
|
||||||
|
--active-lift: 0px;
|
||||||
|
--focus-ring: 0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);
|
||||||
|
|
||||||
|
/* ===== Animation Durations ===== */
|
||||||
|
--duration-instant: 100ms;
|
||||||
|
--duration-fast: 150ms;
|
||||||
|
--duration-normal: 250ms;
|
||||||
|
--duration-slow: 350ms;
|
||||||
|
--duration-slower: 500ms;
|
||||||
|
|
||||||
|
/* ===== Component Sizing ===== */
|
||||||
|
--spinner-size: 40px;
|
||||||
|
--spinner-size-sm: 24px;
|
||||||
|
--spinner-size-lg: 56px;
|
||||||
|
--spinner-border: 4px;
|
||||||
|
|
||||||
|
/* ===== Dashboard Metrics ===== */
|
||||||
|
--metric-gap: 1rem;
|
||||||
|
--sparkline-height: 80px;
|
||||||
|
--sparkline-height-lg: 150px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] All extended tokens defined
|
||||||
|
- [ ] References existing variables
|
||||||
|
- [ ] No hardcoded values
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 1.5: Create primevue-overrides.css
|
||||||
|
**Status:** ⏸️ | **Est:** 2 hours
|
||||||
|
|
||||||
|
**File:** `reports-app/frontend/src/assets/css/vendor/primevue-overrides.css`
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* PrimeVue Component Overrides - ROA2WEB */
|
||||||
|
/* Global customization of PrimeVue saga-blue theme */
|
||||||
|
|
||||||
|
/* ===== Input Components ===== */
|
||||||
|
.p-inputtext,
|
||||||
|
.p-password input,
|
||||||
|
.p-dropdown,
|
||||||
|
.p-calendar input,
|
||||||
|
.p-autocomplete input {
|
||||||
|
border: 2px solid var(--color-border) !important;
|
||||||
|
border-radius: var(--radius-md) !important;
|
||||||
|
padding: var(--space-sm) var(--space-md) !important;
|
||||||
|
font-size: var(--text-base) !important;
|
||||||
|
font-family: inherit !important;
|
||||||
|
color: var(--color-text) !important;
|
||||||
|
background: var(--color-bg) !important;
|
||||||
|
transition: all var(--transition-fast) !important;
|
||||||
|
min-height: 44px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Focus States ===== */
|
||||||
|
.p-inputtext:focus,
|
||||||
|
.p-password input:focus,
|
||||||
|
.p-dropdown:focus,
|
||||||
|
.p-calendar input:focus,
|
||||||
|
.p-autocomplete input:focus {
|
||||||
|
outline: none !important;
|
||||||
|
border-color: var(--color-primary) !important;
|
||||||
|
box-shadow: var(--focus-ring) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Hover States ===== */
|
||||||
|
.p-inputtext:hover:not(:disabled),
|
||||||
|
.p-password input:hover:not(:disabled),
|
||||||
|
.p-dropdown:hover:not(:disabled) {
|
||||||
|
border-color: var(--color-border-dark, #d1d5db) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Disabled States ===== */
|
||||||
|
.p-inputtext:disabled,
|
||||||
|
.p-password input:disabled,
|
||||||
|
.p-dropdown:disabled {
|
||||||
|
background: var(--color-bg-muted, #f3f4f6) !important;
|
||||||
|
color: var(--color-text-muted, #9ca3af) !important;
|
||||||
|
opacity: 0.6 !important;
|
||||||
|
cursor: not-allowed !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Validation States ===== */
|
||||||
|
.p-invalid.p-component,
|
||||||
|
.p-inputtext.p-invalid,
|
||||||
|
.p-password.p-invalid input {
|
||||||
|
border-color: var(--color-error, #ef4444) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Button Overrides ===== */
|
||||||
|
.p-button {
|
||||||
|
padding: var(--space-sm) var(--space-md) !important;
|
||||||
|
font-size: var(--text-sm) !important;
|
||||||
|
font-weight: var(--font-medium) !important;
|
||||||
|
border-radius: var(--radius-md) !important;
|
||||||
|
transition: all var(--transition-fast) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-button:hover {
|
||||||
|
transform: translateY(-1px) !important;
|
||||||
|
box-shadow: var(--shadow-md) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== DataTable ===== */
|
||||||
|
.p-datatable .p-datatable-thead > tr > th {
|
||||||
|
background: var(--color-bg-muted, #f9fafb) !important;
|
||||||
|
color: var(--color-text) !important;
|
||||||
|
font-weight: var(--font-semibold) !important;
|
||||||
|
border-bottom: 2px solid var(--color-border) !important;
|
||||||
|
padding: var(--space-md) var(--space-lg) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datatable .p-datatable-tbody > tr {
|
||||||
|
transition: background-color var(--transition-fast) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-datatable .p-datatable-tbody > tr:hover {
|
||||||
|
background: var(--color-bg-secondary, #f8fafc) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Card ===== */
|
||||||
|
.p-card {
|
||||||
|
box-shadow: var(--shadow-sm) !important;
|
||||||
|
border: 1px solid var(--color-border) !important;
|
||||||
|
border-radius: var(--card-radius, 8px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-card .p-card-header {
|
||||||
|
background: var(--color-bg-secondary) !important;
|
||||||
|
border-bottom: 1px solid var(--color-border) !important;
|
||||||
|
padding: var(--space-lg) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-card .p-card-body {
|
||||||
|
padding: var(--space-lg) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Mobile Optimizations ===== */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.p-inputtext,
|
||||||
|
.p-password input,
|
||||||
|
.p-dropdown,
|
||||||
|
.p-calendar input {
|
||||||
|
font-size: 16px !important; /* Prevent iOS zoom */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] All common PrimeVue components styled
|
||||||
|
- [ ] Design tokens used (not hardcoded)
|
||||||
|
- [ ] Mobile optimizations included
|
||||||
|
- [ ] Ready for Phase 3 migration
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2. Integration (2 tasks)
|
||||||
|
|
||||||
|
#### Task 2.1: Update main.css
|
||||||
|
**Status:** ⏸️ | **Est:** 15 min
|
||||||
|
|
||||||
|
**File:** `reports-app/frontend/src/assets/css/main.css`
|
||||||
|
|
||||||
|
**Add after existing imports:**
|
||||||
|
```css
|
||||||
|
/* Main CSS Entry Point - ROA2WEB */
|
||||||
|
|
||||||
|
/* 1. Core Foundation */
|
||||||
|
@import './core/variables.css';
|
||||||
|
@import './core/tokens.css'; /* NEW */
|
||||||
|
@import './core/reset.css';
|
||||||
|
@import './core/typography.css';
|
||||||
|
|
||||||
|
/* 2. Layout System */
|
||||||
|
@import './layout/grid.css';
|
||||||
|
@import './layout/containers.css';
|
||||||
|
@import './layout/navigation.css';
|
||||||
|
|
||||||
|
/* 3. Component Library */
|
||||||
|
@import './components/cards.css';
|
||||||
|
@import './components/buttons.css';
|
||||||
|
@import './components/tables.css';
|
||||||
|
@import './components/forms.css';
|
||||||
|
@import './components/stats.css';
|
||||||
|
|
||||||
|
/* 4. Patterns */
|
||||||
|
@import './patterns/interactive.css'; /* NEW */
|
||||||
|
@import './patterns/dashboard.css'; /* NEW */
|
||||||
|
@import './patterns/animations.css'; /* NEW */
|
||||||
|
|
||||||
|
/* 5. Utilities */
|
||||||
|
@import './utilities/spacing.css';
|
||||||
|
@import './utilities/display.css';
|
||||||
|
@import './utilities/text.css';
|
||||||
|
@import './utilities/flex.css';
|
||||||
|
|
||||||
|
/* 6. Vendor Overrides */
|
||||||
|
@import './vendor/primevue-overrides.css'; /* NEW */
|
||||||
|
|
||||||
|
/* 7. Mobile Optimizations */
|
||||||
|
@import './mobile.css';
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] All new files imported
|
||||||
|
- [ ] Import order correct (core → patterns → vendor)
|
||||||
|
- [ ] No syntax errors
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 2.2: Verify No Visual Changes
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Build and verify
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# Check bundle size
|
||||||
|
ls -lh dist/assets/*.css
|
||||||
|
|
||||||
|
# Run dev server
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# Visually check pages
|
||||||
|
```
|
||||||
|
|
||||||
|
**Check all pages:**
|
||||||
|
- [ ] Login page unchanged
|
||||||
|
- [ ] Dashboard unchanged
|
||||||
|
- [ ] Invoices unchanged
|
||||||
|
- [ ] No console errors
|
||||||
|
- [ ] No CSS warnings
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Zero visual changes
|
||||||
|
- [ ] Build successful
|
||||||
|
- [ ] No errors in console
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 3. Testing & Documentation (3 tasks)
|
||||||
|
|
||||||
|
#### Task 3.1: Build Verification
|
||||||
|
**Status:** ⏸️ | **Est:** 15 min
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd reports-app/frontend
|
||||||
|
|
||||||
|
# Clean build
|
||||||
|
rm -rf dist/
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# Check for errors
|
||||||
|
echo $? # Should be 0
|
||||||
|
|
||||||
|
# Verify CSS files
|
||||||
|
ls -la dist/assets/*.css
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Build completes without errors
|
||||||
|
- [ ] CSS bundle created
|
||||||
|
- [ ] No missing imports
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 3.2: Pattern Documentation
|
||||||
|
**Status:** ⏸️ | **Est:** 45 min
|
||||||
|
|
||||||
|
**Create:** `docs/CSS_PATTERNS_REFERENCE.md`
|
||||||
|
|
||||||
|
**Content:**
|
||||||
|
```markdown
|
||||||
|
# ROA2WEB CSS Patterns Reference
|
||||||
|
|
||||||
|
## Interactive Patterns
|
||||||
|
|
||||||
|
### Loading Spinner
|
||||||
|
\`\`\`html
|
||||||
|
<div class="loading-spinner"></div>
|
||||||
|
<div class="loading-spinner loading-spinner-sm"></div>
|
||||||
|
<div class="loading-spinner loading-spinner-lg"></div>
|
||||||
|
\`\`\`
|
||||||
|
|
||||||
|
### Trend Indicator
|
||||||
|
\`\`\`html
|
||||||
|
<span class="trend trend-up">
|
||||||
|
<i class="pi pi-arrow-up trend-icon"></i>
|
||||||
|
+15%
|
||||||
|
</span>
|
||||||
|
\`\`\`
|
||||||
|
|
||||||
|
<!-- More patterns... -->
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] All patterns documented with examples
|
||||||
|
- [ ] HTML examples provided
|
||||||
|
- [ ] Use cases explained
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 3.3: Commit Phase 2
|
||||||
|
**Status:** ⏸️ | **Est:** 10 min
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add .
|
||||||
|
git commit -m "feat(css): Phase 2 - Add global pattern foundation
|
||||||
|
|
||||||
|
- Create interactive.css (loading, trends, collapse)
|
||||||
|
- Create dashboard.css (headers, metrics, breakdowns)
|
||||||
|
- Create animations.css (slideDown, fadeIn, pulse)
|
||||||
|
- Create tokens.css (extended design tokens)
|
||||||
|
- Create primevue-overrides.css (centralized PrimeVue styling)
|
||||||
|
- Update main.css with new imports
|
||||||
|
- Zero visual changes (additive only)
|
||||||
|
|
||||||
|
Files created: 5 new CSS files
|
||||||
|
Lines added: ~600 lines
|
||||||
|
Phase: 2/7 complete
|
||||||
|
"
|
||||||
|
|
||||||
|
git push origin feature/css-refactoring
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] All files committed
|
||||||
|
- [ ] Commit message descriptive
|
||||||
|
- [ ] Pushed to remote
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Completion Criteria
|
||||||
|
|
||||||
|
- [ ] 5 new CSS files created
|
||||||
|
- [ ] All patterns implemented
|
||||||
|
- [ ] main.css updated
|
||||||
|
- [ ] Zero visual changes
|
||||||
|
- [ ] Build successful
|
||||||
|
- [ ] Documentation created
|
||||||
|
- [ ] Committed to git
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Next Phase
|
||||||
|
|
||||||
|
**Phase 3:** PrimeVue Centralizare
|
||||||
|
- Migrate all component `:deep()` to global
|
||||||
|
- Eliminate `!important` from components
|
||||||
|
- See: [phase-3-primevue.md](./phase-3-primevue.md)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Created:** 2025-11-18
|
||||||
|
**Status:** ⏸️ Not Started
|
||||||
359
features/phases/phase-3-primevue.md
Normal file
359
features/phases/phase-3-primevue.md
Normal file
@@ -0,0 +1,359 @@
|
|||||||
|
# Phase 3: PrimeVue Centralizare 🎨
|
||||||
|
|
||||||
|
**Priority:** High - Eliminate anti-patterns
|
||||||
|
**Duration:** 6-8 hours
|
||||||
|
**Status:** ⏸️ Not Started
|
||||||
|
**Risk Level:** Medium
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Obiective
|
||||||
|
|
||||||
|
1. **Elimină toate `:deep()` din componente** - 50+ instanțe → 0
|
||||||
|
2. **Centralizează în primevue-overrides.css** - Single source of truth
|
||||||
|
3. **Replace hardcoded values** - #3b82f6 → var(--color-primary)
|
||||||
|
4. **Zero `!important` în components** - Only in global overrides
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task Breakdown (12 tasks)
|
||||||
|
|
||||||
|
### 1. Audit `:deep()` Usage (1 task)
|
||||||
|
|
||||||
|
#### Task 1.1: Find All `:deep()` Instances
|
||||||
|
**Status:** ⏸️ | **Est:** 20 min
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd reports-app/frontend
|
||||||
|
|
||||||
|
# Find all :deep() usage
|
||||||
|
grep -rn ":deep(" src/views/ src/components/
|
||||||
|
|
||||||
|
# Count instances
|
||||||
|
grep -r ":deep(" src/ | wc -l
|
||||||
|
|
||||||
|
# Create audit file
|
||||||
|
grep -rn ":deep(" src/ > /tmp/deep-overrides-audit.txt
|
||||||
|
cat /tmp/deep-overrides-audit.txt
|
||||||
|
```
|
||||||
|
|
||||||
|
**Document findings:**
|
||||||
|
- [ ] LoginView.vue: Lines 269-288 (~20 lines)
|
||||||
|
- [ ] InvoicesView.vue: Lines ___
|
||||||
|
- [ ] Card components: Lines ___
|
||||||
|
- [ ] Total instances: ___
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] All `:deep()` instances documented
|
||||||
|
- [ ] File/line numbers recorded
|
||||||
|
- [ ] Ready for migration
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2. Migrate Component Overrides (6 tasks)
|
||||||
|
|
||||||
|
#### Task 2.1: Migrate LoginView.vue
|
||||||
|
**Status:** ⏸️ | **Est:** 45 min
|
||||||
|
|
||||||
|
**Remove from LoginView.vue (lines 269-288):**
|
||||||
|
```vue
|
||||||
|
<style scoped>
|
||||||
|
/* DELETE ALL :deep() - Already in primevue-overrides.css */
|
||||||
|
:deep(.p-inputtext),
|
||||||
|
:deep(.p-password input) {
|
||||||
|
/* ... all lines ... */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Verify in primevue-overrides.css:**
|
||||||
|
```css
|
||||||
|
/* Already exists from Phase 2 */
|
||||||
|
.p-inputtext,
|
||||||
|
.p-password input {
|
||||||
|
border: 2px solid var(--color-border) !important;
|
||||||
|
/* ... */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Test:**
|
||||||
|
- [ ] Login form inputs styled correctly
|
||||||
|
- [ ] Focus states work
|
||||||
|
- [ ] Validation states work
|
||||||
|
- [ ] No visual regression
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] All `:deep()` removed from LoginView.vue
|
||||||
|
- [ ] Form still styled correctly
|
||||||
|
- [ ] Playwright test passes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 2.2: Migrate InvoicesView.vue
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
|
||||||
|
**Search and remove:**
|
||||||
|
```bash
|
||||||
|
# Find PrimeVue overrides
|
||||||
|
grep -n "p-" src/views/InvoicesView.vue
|
||||||
|
```
|
||||||
|
|
||||||
|
**Remove any `:deep()` for:**
|
||||||
|
- [ ] Dropdown styling
|
||||||
|
- [ ] Calendar styling
|
||||||
|
- [ ] DataTable styling
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] No `:deep()` in InvoicesView.vue
|
||||||
|
- [ ] Filters work correctly
|
||||||
|
- [ ] Table styled correctly
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 2.3: Migrate Card Components
|
||||||
|
**Status:** ⏸️ | **Est:** 1 hour
|
||||||
|
|
||||||
|
**Components to check:**
|
||||||
|
- [ ] MetricCard.vue
|
||||||
|
- [ ] CashFlowMetricCard.vue
|
||||||
|
- [ ] ClientiBalanceCard.vue
|
||||||
|
- [ ] FurnizoriBalanceCard.vue
|
||||||
|
- [ ] TreasuryDualCard.vue
|
||||||
|
|
||||||
|
**For each component:**
|
||||||
|
```bash
|
||||||
|
# Check for :deep()
|
||||||
|
grep -n ":deep" src/components/dashboard/cards/*.vue
|
||||||
|
```
|
||||||
|
|
||||||
|
**Remove and verify:**
|
||||||
|
- [ ] Chart.js canvas overrides
|
||||||
|
- [ ] PrimeVue Card overrides
|
||||||
|
- [ ] Button overrides
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Zero `:deep()` in all card components
|
||||||
|
- [ ] Charts render correctly
|
||||||
|
- [ ] Cards styled identically
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 2.4: Replace Hardcoded Colors
|
||||||
|
**Status:** ⏸️ | **Est:** 1 hour
|
||||||
|
|
||||||
|
**Find all hardcoded colors:**
|
||||||
|
```bash
|
||||||
|
# Find hex colors
|
||||||
|
grep -rn "#[0-9a-fA-F]\{6\}" src/ --include="*.vue"
|
||||||
|
|
||||||
|
# Common culprits
|
||||||
|
grep -rn "#3b82f6" src/ # Primary blue
|
||||||
|
grep -rn "#e5e7eb" src/ # Border gray
|
||||||
|
grep -rn "#10b981" src/ # Success green
|
||||||
|
grep -rn "#ef4444" src/ # Error red
|
||||||
|
```
|
||||||
|
|
||||||
|
**Replace with tokens:**
|
||||||
|
- `#3b82f6` → `var(--color-primary)`
|
||||||
|
- `#e5e7eb` → `var(--color-border)`
|
||||||
|
- `#10b981` → `var(--color-success)`
|
||||||
|
- `#ef4444` → `var(--color-error)`
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Zero hardcoded hex colors in components
|
||||||
|
- [ ] All use design tokens
|
||||||
|
- [ ] Colors consistent across app
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 2.5: Remove !important from Components
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
|
||||||
|
**Find all !important:**
|
||||||
|
```bash
|
||||||
|
grep -rn "!important" src/views/ src/components/
|
||||||
|
```
|
||||||
|
|
||||||
|
**Remove from scoped styles:**
|
||||||
|
- Only global primevue-overrides.css should use `!important`
|
||||||
|
- Component scoped styles should NEVER use it
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Zero `!important` in component <style scoped>
|
||||||
|
- [ ] Styling still works via cascade
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 2.6: Verify Zero :deep()
|
||||||
|
**Status:** ⏸️ | **Est:** 15 min
|
||||||
|
|
||||||
|
**Final verification:**
|
||||||
|
```bash
|
||||||
|
# Should return 0 results
|
||||||
|
grep -r ":deep(" src/views/ src/components/ | wc -l
|
||||||
|
|
||||||
|
# Verify = 0
|
||||||
|
echo "Expected: 0, Actual: $(grep -r ':deep(' src/ | wc -l)"
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Zero `:deep()` in entire codebase
|
||||||
|
- [ ] All styling via global CSS
|
||||||
|
- [ ] Audit complete
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 3. Testing (3 tasks)
|
||||||
|
|
||||||
|
#### Task 3.1: Component Testing
|
||||||
|
**Status:** ⏸️ | **Est:** 45 min
|
||||||
|
|
||||||
|
**Test all PrimeVue components:**
|
||||||
|
- [ ] InputText - border, focus, validation
|
||||||
|
- [ ] Password - toggle mask, focus
|
||||||
|
- [ ] Dropdown - options, selection, styling
|
||||||
|
- [ ] Calendar - date picker, focus
|
||||||
|
- [ ] DataTable - headers, rows, hover
|
||||||
|
- [ ] Card - padding, borders, shadows
|
||||||
|
- [ ] Button - variants, hover, disabled
|
||||||
|
|
||||||
|
**Test views:**
|
||||||
|
- [ ] Login page - all form elements
|
||||||
|
- [ ] Dashboard - all cards
|
||||||
|
- [ ] Invoices - filters and table
|
||||||
|
- [ ] Telegram - buttons and forms
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] All components styled correctly
|
||||||
|
- [ ] No visual regressions
|
||||||
|
- [ ] All states work (hover, focus, disabled)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 3.2: Playwright Visual Regression
|
||||||
|
**Status:** ⏸️ | **Est:** 20 min
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run test:e2e
|
||||||
|
|
||||||
|
# Check for failures
|
||||||
|
npm run test:e2e:report
|
||||||
|
```
|
||||||
|
|
||||||
|
**Expected:**
|
||||||
|
- [ ] All snapshots match (pixel-perfect)
|
||||||
|
- [ ] No unexpected differences
|
||||||
|
- [ ] Forms identical to Phase 1
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Playwright tests pass
|
||||||
|
- [ ] Zero visual differences
|
||||||
|
- [ ] Report reviewed
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 3.3: Browser Compatibility
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
|
||||||
|
**Test on:**
|
||||||
|
- [ ] Chrome - PrimeVue components render
|
||||||
|
- [ ] Firefox - CSS variables work
|
||||||
|
- [ ] Safari - Focus states visible
|
||||||
|
- [ ] Edge - No degradation
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Consistent across all browsers
|
||||||
|
- [ ] No console errors
|
||||||
|
- [ ] PrimeVue overrides work everywhere
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4. Documentation & Commit (2 tasks)
|
||||||
|
|
||||||
|
#### Task 4.1: Update Guidelines
|
||||||
|
**Status:** ⏸️ | **Est:** 20 min
|
||||||
|
|
||||||
|
**Update:** `docs/COMPONENT_STYLING.md`
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
## PrimeVue Styling Guidelines
|
||||||
|
|
||||||
|
### ❌ NEVER Do This
|
||||||
|
\`\`\`vue
|
||||||
|
<style scoped>
|
||||||
|
:deep(.p-inputtext) {
|
||||||
|
border: 2px solid #3b82f6 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
\`\`\`
|
||||||
|
|
||||||
|
### ✅ Always Do This
|
||||||
|
PrimeVue components are styled globally in:
|
||||||
|
\`assets/css/vendor/primevue-overrides.css\`
|
||||||
|
|
||||||
|
Use classes, not overrides:
|
||||||
|
\`\`\`vue
|
||||||
|
<InputText class="form-input" />
|
||||||
|
\`\`\`
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Guidelines documented
|
||||||
|
- [ ] Examples provided
|
||||||
|
- [ ] Best practices clear
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 4.2: Commit Phase 3
|
||||||
|
**Status:** ⏸️ | **Est:** 10 min
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add .
|
||||||
|
git commit -m "feat(css): Phase 3 - Centralize PrimeVue overrides
|
||||||
|
|
||||||
|
- Migrate all :deep() to primevue-overrides.css
|
||||||
|
- Remove 50+ instances of :deep() from components
|
||||||
|
- Replace hardcoded colors with design tokens
|
||||||
|
- Remove !important from component scoped styles
|
||||||
|
- Update styling guidelines
|
||||||
|
|
||||||
|
Impact:
|
||||||
|
- Zero :deep() in components
|
||||||
|
- Single source of truth for PrimeVue styling
|
||||||
|
- Consistent design token usage
|
||||||
|
- Cleaner component code
|
||||||
|
|
||||||
|
Testing:
|
||||||
|
- ✅ All PrimeVue components work
|
||||||
|
- ✅ Playwright visual regression pass
|
||||||
|
- ✅ Browser compatibility verified
|
||||||
|
|
||||||
|
Phase: 3/7 complete
|
||||||
|
"
|
||||||
|
|
||||||
|
git push origin feature/css-refactoring
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Completion Criteria
|
||||||
|
|
||||||
|
- [ ] 0 `:deep()` instances in components
|
||||||
|
- [ ] 0 hardcoded hex colors
|
||||||
|
- [ ] 0 `!important` in scoped styles
|
||||||
|
- [ ] All PrimeVue components styled globally
|
||||||
|
- [ ] Visual regression tests pass
|
||||||
|
- [ ] Documentation updated
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Next Phase
|
||||||
|
|
||||||
|
**Phase 4:** Card Components Refactoring
|
||||||
|
- Extract common patterns (~800 lines)
|
||||||
|
- See: [phase-4-cards.md](./phase-4-cards.md)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Created:** 2025-11-18
|
||||||
|
**Status:** ⏸️ Not Started
|
||||||
584
features/phases/phase-4-cards.md
Normal file
584
features/phases/phase-4-cards.md
Normal file
@@ -0,0 +1,584 @@
|
|||||||
|
# Phase 4: Card Components Refactoring 📊
|
||||||
|
|
||||||
|
**Priority:** High - Major duplication area
|
||||||
|
**Duration:** 16-20 hours
|
||||||
|
**Status:** ⏸️ Not Started
|
||||||
|
**Risk Level:** High
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Obiective
|
||||||
|
|
||||||
|
1. **Extract common patterns** - Base card, sparklines, breakdowns
|
||||||
|
2. **Refactor 5 card components** - ~800 lines eliminated
|
||||||
|
3. **Standardize metric displays** - Consistent value/label patterns
|
||||||
|
4. **Reusable card classes** - For future components
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Current State
|
||||||
|
|
||||||
|
| Component | Current CSS | Target CSS | Reduction |
|
||||||
|
|-----------|-------------|------------|-----------|
|
||||||
|
| MetricCard.vue | 331 lines | 80 lines | 251 lines (76%) |
|
||||||
|
| CashFlowMetricCard.vue | 179 lines | 60 lines | 119 lines (67%) |
|
||||||
|
| ClientiBalanceCard.vue | 260 lines | 90 lines | 170 lines (65%) |
|
||||||
|
| FurnizoriBalanceCard.vue | ~260 lines | 90 lines | 170 lines (65%) |
|
||||||
|
| TreasuryDualCard.vue | ~200 lines | 60 lines | 140 lines (70%) |
|
||||||
|
| **TOTAL** | **~1,230 lines** | **~380 lines** | **~850 lines (69%)** |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task Breakdown (22 tasks)
|
||||||
|
|
||||||
|
### 1. Global Pattern Extraction (5 tasks)
|
||||||
|
|
||||||
|
#### Task 1.1: Add Base Card Styles to cards.css
|
||||||
|
**Status:** ⏸️ | **Est:** 1 hour
|
||||||
|
|
||||||
|
**File:** `reports-app/frontend/src/assets/css/components/cards.css`
|
||||||
|
|
||||||
|
**Add at end of file:**
|
||||||
|
```css
|
||||||
|
/* ===== Dashboard Metric Cards ===== */
|
||||||
|
|
||||||
|
.metric-card {
|
||||||
|
background: var(--color-bg);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--card-radius);
|
||||||
|
padding: var(--card-padding);
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
min-height: var(--card-min-height);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--card-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-card:hover {
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
transform: translateY(var(--hover-lift));
|
||||||
|
border-color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Metric display patterns */
|
||||||
|
.metric-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-md);
|
||||||
|
margin-bottom: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
font-size: var(--text-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-value {
|
||||||
|
font-size: var(--value-size);
|
||||||
|
font-weight: var(--font-bold);
|
||||||
|
line-height: var(--leading-tight);
|
||||||
|
font-family: var(--font-mono, monospace);
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-value-lg {
|
||||||
|
font-size: var(--value-size-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-label {
|
||||||
|
font-size: var(--label-size);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
margin-bottom: var(--space-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.metric-card {
|
||||||
|
min-height: calc(var(--card-min-height) - 40px);
|
||||||
|
padding: var(--card-padding-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-value {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Base card patterns added
|
||||||
|
- [ ] Metric display patterns defined
|
||||||
|
- [ ] Responsive rules included
|
||||||
|
- [ ] No visual changes (not used yet)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 1.2: Add Sparkline Patterns to dashboard.css
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
|
||||||
|
**File:** `reports-app/frontend/src/assets/css/patterns/dashboard.css`
|
||||||
|
|
||||||
|
**Add:**
|
||||||
|
```css
|
||||||
|
/* ===== Enhanced Sparkline Patterns ===== */
|
||||||
|
|
||||||
|
.metric-sparkline {
|
||||||
|
margin: var(--space-md) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sparkline-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: var(--space-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sparkline-title {
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sparkline-value {
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
font-family: var(--font-mono, monospace);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Sparkline header pattern defined
|
||||||
|
- [ ] Title/value layout included
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 1.3: Enhanced Breakdown Patterns
|
||||||
|
**Status:** ⏸️ | **Est:** 45 min
|
||||||
|
|
||||||
|
**File:** `reports-app/frontend/src/assets/css/patterns/dashboard.css`
|
||||||
|
|
||||||
|
**Enhance existing breakdown patterns:**
|
||||||
|
```css
|
||||||
|
/* ===== Enhanced Breakdown Patterns ===== */
|
||||||
|
|
||||||
|
.breakdown-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
padding: var(--space-sm);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
transition: background-color var(--transition-fast);
|
||||||
|
margin-bottom: var(--space-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.breakdown-header:hover {
|
||||||
|
background: var(--color-bg-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.breakdown-header-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.breakdown-toggle {
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
font-size: 0.625rem;
|
||||||
|
transition: transform var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.breakdown-toggle.expanded {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.breakdown-divider {
|
||||||
|
height: 1px;
|
||||||
|
background: var(--color-border);
|
||||||
|
margin: var(--space-md) 0;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Breakdown header with toggle
|
||||||
|
- [ ] Hover states defined
|
||||||
|
- [ ] Animation classes ready
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 1.4: Add Color Utilities
|
||||||
|
**Status:** ⏸️ | **Est:** 20 min
|
||||||
|
|
||||||
|
**File:** `reports-app/frontend/src/assets/css/utilities/colors.css` (NEW)
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* Color Utilities - ROA2WEB */
|
||||||
|
|
||||||
|
/* Background colors for icons */
|
||||||
|
.bg-primary { background-color: var(--color-primary); }
|
||||||
|
.bg-success { background-color: var(--color-success); }
|
||||||
|
.bg-warning { background-color: var(--color-warning); }
|
||||||
|
.bg-error { background-color: var(--color-error); }
|
||||||
|
.bg-info { background-color: var(--color-info); }
|
||||||
|
|
||||||
|
.bg-primary-light { background-color: rgba(var(--color-primary-rgb), 0.1); }
|
||||||
|
.bg-success-light { background-color: rgba(var(--color-success-rgb), 0.1); }
|
||||||
|
.bg-warning-light { background-color: rgba(var(--color-warning-rgb), 0.1); }
|
||||||
|
|
||||||
|
/* Text colors */
|
||||||
|
.text-primary { color: var(--color-primary); }
|
||||||
|
.text-success { color: var(--color-success); }
|
||||||
|
.text-warning { color: var(--color-warning); }
|
||||||
|
.text-error { color: var(--color-error); }
|
||||||
|
.text-muted { color: var(--color-text-muted); }
|
||||||
|
```
|
||||||
|
|
||||||
|
**Add to main.css:**
|
||||||
|
```css
|
||||||
|
@import './utilities/colors.css';
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Color utilities created
|
||||||
|
- [ ] Imported in main.css
|
||||||
|
- [ ] RGB variants for transparency
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 1.5: Test Global Patterns
|
||||||
|
**Status:** ⏸️ | **Est:** 15 min
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Build and verify
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# Check for errors
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# No visual changes expected
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Build successful
|
||||||
|
- [ ] No CSS errors
|
||||||
|
- [ ] Patterns available (not used yet)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2. Component Refactoring (15 tasks - 3 per component x 5)
|
||||||
|
|
||||||
|
#### MetricCard.vue (Tasks 2.1-2.3)
|
||||||
|
|
||||||
|
##### Task 2.1: Update MetricCard Template
|
||||||
|
**Status:** ⏸️ | **Est:** 1 hour
|
||||||
|
|
||||||
|
**File:** `src/components/dashboard/cards/MetricCard.vue`
|
||||||
|
|
||||||
|
**Current template structure:**
|
||||||
|
```vue
|
||||||
|
<div class="metric-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<div class="icon-wrapper" :style="{ background: iconBg }">
|
||||||
|
<i :class="icon"></i>
|
||||||
|
</div>
|
||||||
|
<!-- ... -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Updated template:**
|
||||||
|
```vue
|
||||||
|
<div class="metric-card card-hover">
|
||||||
|
<div class="metric-header">
|
||||||
|
<div class="metric-icon bg-primary-light text-primary">
|
||||||
|
<i :class="icon"></i>
|
||||||
|
</div>
|
||||||
|
<div class="metric-label">{{ label }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="metric-value" :class="{ 'trend-up': trend > 0, 'trend-down': trend < 0 }">
|
||||||
|
{{ formattedValue }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="showSparkline" class="sparkline-container">
|
||||||
|
<canvas ref="sparklineCanvas" class="sparkline-canvas"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="hasBreakdown" class="breakdown-section">
|
||||||
|
<div class="breakdown-header" @click="toggleBreakdown">
|
||||||
|
<div class="breakdown-header-left">
|
||||||
|
<i class="pi pi-chevron-right breakdown-toggle" :class="{ expanded: breakdownExpanded }"></i>
|
||||||
|
<span class="breakdown-label">Detalii</span>
|
||||||
|
</div>
|
||||||
|
<span class="breakdown-value">{{ breakdownTotal }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="breakdownExpanded" class="breakdown-subitems slide-down">
|
||||||
|
<div v-for="item in breakdownItems" :key="item.id" class="breakdown-subitem">
|
||||||
|
<span class="breakdown-sublabel">{{ item.label }}</span>
|
||||||
|
<span class="breakdown-subvalue">{{ item.value }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Template uses global classes
|
||||||
|
- [ ] No inline styles for colors
|
||||||
|
- [ ] Breakdown uses global pattern
|
||||||
|
- [ ] Sparkline uses global container
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
##### Task 2.2: Remove Duplicate CSS from MetricCard
|
||||||
|
**Status:** ⏸️ | **Est:** 45 min
|
||||||
|
|
||||||
|
**DELETE from <style scoped> (lines to remove ~250):**
|
||||||
|
```css
|
||||||
|
/* DELETE - now in cards.css */
|
||||||
|
.metric-card {
|
||||||
|
background: var(--color-bg, #ffffff);
|
||||||
|
border: 1px solid var(--color-border, #e5e7eb);
|
||||||
|
/* ... 20 more lines ... */
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-card:hover {
|
||||||
|
/* ... DELETE ... */
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
/* ... DELETE ... */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* DELETE - now in dashboard.css */
|
||||||
|
.breakdown-header {
|
||||||
|
/* ... DELETE ... */
|
||||||
|
}
|
||||||
|
|
||||||
|
.breakdown-subitems {
|
||||||
|
/* ... DELETE ... */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* DELETE - now in animations.css */
|
||||||
|
@keyframes slideDown {
|
||||||
|
/* ... DELETE ... */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**KEEP component-specific:**
|
||||||
|
```css
|
||||||
|
/* Component-specific Chart.js configuration */
|
||||||
|
.sparkline-canvas {
|
||||||
|
/* Keep Chart.js specific overrides */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Component-specific data formatting */
|
||||||
|
.metric-specific-class {
|
||||||
|
/* Only if truly unique to this component */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] 250+ lines deleted
|
||||||
|
- [ ] Only component-specific CSS remains
|
||||||
|
- [ ] Card renders identically
|
||||||
|
- [ ] Functionality preserved
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
##### Task 2.3: Test MetricCard
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
|
||||||
|
**Visual tests:**
|
||||||
|
- [ ] Card layout identical
|
||||||
|
- [ ] Hover effect works
|
||||||
|
- [ ] Sparkline renders
|
||||||
|
- [ ] Breakdown expands/collapses
|
||||||
|
- [ ] Trend indicators show correctly
|
||||||
|
- [ ] Icon background colors work
|
||||||
|
|
||||||
|
**Functional tests:**
|
||||||
|
- [ ] Props work (value, label, icon, trend)
|
||||||
|
- [ ] Computed properties correct
|
||||||
|
- [ ] Chart.js renders
|
||||||
|
- [ ] Breakdown data displays
|
||||||
|
- [ ] Click interactions work
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] No visual regressions
|
||||||
|
- [ ] All features work
|
||||||
|
- [ ] ~250 lines CSS eliminated
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### CashFlowMetricCard.vue (Tasks 2.4-2.6)
|
||||||
|
|
||||||
|
##### Task 2.4: Update CashFlowMetricCard Template
|
||||||
|
**Status:** ⏸️ | **Est:** 45 min
|
||||||
|
|
||||||
|
**Apply same pattern as MetricCard:**
|
||||||
|
- [ ] Use `.metric-card` base class
|
||||||
|
- [ ] Use `.metric-header`, `.metric-value`, `.metric-label`
|
||||||
|
- [ ] Use global breakdown pattern
|
||||||
|
- [ ] Remove inline styles
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Template updated
|
||||||
|
- [ ] Global classes used
|
||||||
|
- [ ] No inline styles
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
##### Task 2.5: Remove Duplicate CSS
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
|
||||||
|
**Target reduction:** 179 → 60 lines (119 lines deleted)
|
||||||
|
|
||||||
|
**Delete:**
|
||||||
|
- [ ] Card base styles
|
||||||
|
- [ ] Hover effects
|
||||||
|
- [ ] Breakdown patterns
|
||||||
|
- [ ] Animations
|
||||||
|
|
||||||
|
**Keep:**
|
||||||
|
- [ ] Component-specific chart config
|
||||||
|
- [ ] Unique data formatting
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] 119 lines deleted
|
||||||
|
- [ ] Component CSS < 60 lines
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
##### Task 2.6: Test CashFlowMetricCard
|
||||||
|
**Status:** ⏸️ | **Est:** 20 min
|
||||||
|
|
||||||
|
- [ ] Card renders correctly
|
||||||
|
- [ ] Dual charts display
|
||||||
|
- [ ] Cash flow data accurate
|
||||||
|
- [ ] Breakdown works
|
||||||
|
- [ ] No visual regressions
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### ClientiBalanceCard.vue (Tasks 2.7-2.9)
|
||||||
|
##### Task 2.7: Update Template
|
||||||
|
**Status:** ⏸️ | **Est:** 45 min
|
||||||
|
**Acceptance:** Template uses global patterns
|
||||||
|
|
||||||
|
##### Task 2.8: Remove Duplicate CSS
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
**Target:** 260 → 90 lines (170 deleted)
|
||||||
|
|
||||||
|
##### Task 2.9: Test
|
||||||
|
**Status:** ⏸️ | **Est:** 20 min
|
||||||
|
**Acceptance:** Client balance displays correctly
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### FurnizoriBalanceCard.vue (Tasks 2.10-2.12)
|
||||||
|
##### Task 2.10: Update Template
|
||||||
|
**Status:** ⏸️ | **Est:** 45 min
|
||||||
|
|
||||||
|
##### Task 2.11: Remove Duplicate CSS
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
**Target:** ~260 → 90 lines (170 deleted)
|
||||||
|
|
||||||
|
##### Task 2.12: Test
|
||||||
|
**Status:** ⏸️ | **Est:** 20 min
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### TreasuryDualCard.vue (Tasks 2.13-2.15)
|
||||||
|
##### Task 2.13: Update Template
|
||||||
|
**Status:** ⏸️ | **Est:** 45 min
|
||||||
|
|
||||||
|
##### Task 2.14: Remove Duplicate CSS
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
**Target:** ~200 → 60 lines (140 deleted)
|
||||||
|
|
||||||
|
##### Task 2.15: Test
|
||||||
|
**Status:** ⏸️ | **Est:** 20 min
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 3. Final Testing (2 tasks)
|
||||||
|
|
||||||
|
#### Task 3.1: Test All Cards Together
|
||||||
|
**Status:** ⏸️ | **Est:** 1 hour
|
||||||
|
|
||||||
|
**Dashboard view:**
|
||||||
|
- [ ] All 5 cards display in grid
|
||||||
|
- [ ] Hover effects consistent
|
||||||
|
- [ ] Sparklines render
|
||||||
|
- [ ] Breakdowns work on all cards
|
||||||
|
- [ ] Trend indicators correct
|
||||||
|
- [ ] Responsive layout works
|
||||||
|
|
||||||
|
**Playwright:**
|
||||||
|
```bash
|
||||||
|
npm run test:e2e -- tests/e2e/dashboard/
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] All cards work together
|
||||||
|
- [ ] No layout issues
|
||||||
|
- [ ] Visual regression tests pass
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 3.2: Performance Measurement
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
|
||||||
|
**Measure:**
|
||||||
|
```bash
|
||||||
|
# CSS bundle size
|
||||||
|
ls -lh dist/assets/*.css
|
||||||
|
|
||||||
|
# Component CSS reduction
|
||||||
|
grep -c "}" src/components/dashboard/cards/*.vue
|
||||||
|
```
|
||||||
|
|
||||||
|
**Document:**
|
||||||
|
- [ ] Before: ~1,230 lines total card CSS
|
||||||
|
- [ ] After: ~380 lines total card CSS
|
||||||
|
- [ ] Reduction: ~850 lines (69%)
|
||||||
|
- [ ] Bundle size impact: ___ KB
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Target reduction achieved
|
||||||
|
- [ ] Metrics documented
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Completion Criteria
|
||||||
|
|
||||||
|
- [ ] 5 card components refactored
|
||||||
|
- [ ] ~850 lines CSS eliminated
|
||||||
|
- [ ] All cards use global patterns
|
||||||
|
- [ ] Visual regression tests pass
|
||||||
|
- [ ] Performance metrics documented
|
||||||
|
- [ ] Committed to git
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Next Phase
|
||||||
|
|
||||||
|
**Phase 5:** DashboardView.vue Major Refactoring
|
||||||
|
- THE BIG ONE: 2,010 → 300 lines
|
||||||
|
- See: [phase-5-dashboard.md](./phase-5-dashboard.md)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Created:** 2025-11-18
|
||||||
|
**Status:** ⏸️ Not Started
|
||||||
934
features/phases/phase-5-dashboard.md
Normal file
934
features/phases/phase-5-dashboard.md
Normal file
@@ -0,0 +1,934 @@
|
|||||||
|
# Phase 5: DashboardView.vue - Major Refactoring 🚀
|
||||||
|
|
||||||
|
**Priority:** 🔥 CRITICAL - Biggest impact
|
||||||
|
**Duration:** 24-32 hours
|
||||||
|
**Status:** ⏸️ Not Started
|
||||||
|
**Risk Level:** ⚠️ VERY HIGH
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Obiective
|
||||||
|
|
||||||
|
1. **Reduce 2,010 lines → 300 lines** - 85% reduction (1,710 lines eliminated)
|
||||||
|
2. **Replace custom CSS with global patterns** - Use Phase 2-4 work
|
||||||
|
3. **Consolidate responsive breakpoints** - 4 breakpoints → 1
|
||||||
|
4. **Eliminate table duplication** - Use tables.css
|
||||||
|
5. **MAINTAIN IDENTICAL FUNCTIONALITY** - Zero breaking changes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## RISK MITIGATION
|
||||||
|
|
||||||
|
**⚠️ THIS IS THE MOST CRITICAL PHASE**
|
||||||
|
|
||||||
|
**Mitigation Strategies:**
|
||||||
|
1. **Full backup before starting**
|
||||||
|
2. **Incremental changes with commits**
|
||||||
|
3. **Test after every section**
|
||||||
|
4. **Playwright snapshots before/after each step**
|
||||||
|
5. **Real device testing mandatory**
|
||||||
|
6. **Rollback plan ready**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Current State Analysis
|
||||||
|
|
||||||
|
**File:** `src/views/DashboardView.vue`
|
||||||
|
**Total lines:** 4,010
|
||||||
|
**CSS lines:** 2,010 (lines 787-2797)
|
||||||
|
**CSS percentage:** 50% of file
|
||||||
|
|
||||||
|
### CSS Breakdown:
|
||||||
|
|
||||||
|
| Section | Lines | Can Delete? | Replacement |
|
||||||
|
|---------|-------|-------------|-------------|
|
||||||
|
| Dashboard header | 50 | ✅ Yes | dashboard.css `.page-header` |
|
||||||
|
| Section headers | 100 | ✅ Yes | dashboard.css `.section-header` |
|
||||||
|
| Card containers | 80 | ✅ Yes | cards.css (Phase 4) |
|
||||||
|
| Table styles | 400 | ✅ Yes | tables.css |
|
||||||
|
| Stats/metrics | 200 | ✅ Yes | dashboard.css metrics |
|
||||||
|
| Loading spinner | 40 | ✅ Yes | interactive.css |
|
||||||
|
| Breakdowns | 120 | ✅ Yes | dashboard.css breakdowns |
|
||||||
|
| Animations | 60 | ✅ Yes | animations.css |
|
||||||
|
| Responsive (4 breakpoints) | 600 | ⚠️ Partial | Consolidate to 1 |
|
||||||
|
| Component-specific | 360 | ❌ Keep | Unique logic |
|
||||||
|
| **TOTAL** | **2,010** | **1,650** | **~300 remain** |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task Breakdown (28 tasks)
|
||||||
|
|
||||||
|
### 1. Preparation & Backup (2 tasks)
|
||||||
|
|
||||||
|
#### Task 1.1: Full Backup
|
||||||
|
**Status:** ⏸️ | **Est:** 10 min
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Create backup
|
||||||
|
cp src/views/DashboardView.vue src/views/DashboardView.vue.phase5.backup
|
||||||
|
|
||||||
|
# Commit current state
|
||||||
|
git add .
|
||||||
|
git commit -m "chore: Backup DashboardView before Phase 5 refactoring"
|
||||||
|
|
||||||
|
# Create restore script
|
||||||
|
cat > /tmp/restore-dashboard.sh <<'EOF'
|
||||||
|
#!/bin/bash
|
||||||
|
cp src/views/DashboardView.vue.phase5.backup src/views/DashboardView.vue
|
||||||
|
echo "DashboardView restored from backup"
|
||||||
|
EOF
|
||||||
|
chmod +x /tmp/restore-dashboard.sh
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Backup file created
|
||||||
|
- [ ] Committed to git
|
||||||
|
- [ ] Restore script ready
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 1.2: Detailed CSS Analysis
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
|
||||||
|
**Analyze all 2,010 CSS lines:**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Extract CSS section
|
||||||
|
sed -n '787,2797p' src/views/DashboardView.vue > /tmp/dashboard-css-analysis.css
|
||||||
|
|
||||||
|
# Count by pattern
|
||||||
|
grep -c "\.dashboard-" /tmp/dashboard-css-analysis.css
|
||||||
|
grep -c "\.section-" /tmp/dashboard-css-analysis.css
|
||||||
|
grep -c "@media" /tmp/dashboard-css-analysis.css
|
||||||
|
```
|
||||||
|
|
||||||
|
**Document:**
|
||||||
|
- [ ] All class names used
|
||||||
|
- [ ] Media query breakpoints
|
||||||
|
- [ ] Duplicate patterns
|
||||||
|
- [ ] Component-specific needs
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Full CSS inventory
|
||||||
|
- [ ] Deletion plan documented
|
||||||
|
- [ ] Keep list documented
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2. Page Structure Refactoring (4 tasks)
|
||||||
|
|
||||||
|
#### Task 2.1: Convert Page Header
|
||||||
|
**Status:** ⏸️ | **Est:** 45 min
|
||||||
|
|
||||||
|
**BEFORE (template lines ~50-70):**
|
||||||
|
```vue
|
||||||
|
<div class="dashboard-header">
|
||||||
|
<h1 class="dashboard-title">
|
||||||
|
<i class="pi pi-chart-bar"></i>
|
||||||
|
Dashboard Financiar
|
||||||
|
</h1>
|
||||||
|
<p class="dashboard-subtitle">
|
||||||
|
Companie: {{ selectedCompany?.nume }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**AFTER:**
|
||||||
|
```vue
|
||||||
|
<div class="page-header">
|
||||||
|
<h1 class="page-title">
|
||||||
|
<i class="pi pi-chart-bar"></i>
|
||||||
|
Dashboard Financiar
|
||||||
|
</h1>
|
||||||
|
<p class="page-subtitle">
|
||||||
|
Companie: {{ selectedCompany?.nume }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**DELETE CSS (lines 789-840):**
|
||||||
|
```css
|
||||||
|
/* DELETE - now in dashboard.css */
|
||||||
|
.dashboard-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: var(--space-lg);
|
||||||
|
/* ... */
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
/* ... */
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-subtitle {
|
||||||
|
/* ... */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Test:**
|
||||||
|
- [ ] Header renders identically
|
||||||
|
- [ ] Icon displays
|
||||||
|
- [ ] Company name shows
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Template updated
|
||||||
|
- [ ] ~50 lines CSS deleted
|
||||||
|
- [ ] Visual identical
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 2.2: Convert Section Headers
|
||||||
|
**Status:** ⏸️ | **Est:** 1 hour
|
||||||
|
|
||||||
|
**Find all section headers (~4-5 instances):**
|
||||||
|
```vue
|
||||||
|
<!-- BEFORE -->
|
||||||
|
<div class="dashboard-section">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">Vânzări</h2>
|
||||||
|
<div class="section-controls">
|
||||||
|
<!-- Buttons -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**AFTER:**
|
||||||
|
```vue
|
||||||
|
<!-- Use global pattern -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">Vânzări</h2>
|
||||||
|
<div class="section-controls">
|
||||||
|
<!-- Buttons -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**DELETE CSS (~100 lines):**
|
||||||
|
```css
|
||||||
|
/* DELETE - dashboard.css provides these */
|
||||||
|
.dashboard-section {
|
||||||
|
background: var(--color-bg);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
/* ... */
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
/* ... */
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: var(--text-xl);
|
||||||
|
/* ... */
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-controls {
|
||||||
|
/* ... */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Test each section:**
|
||||||
|
- [ ] Vânzări section
|
||||||
|
- [ ] Achiziții section
|
||||||
|
- [ ] Trezorerie section
|
||||||
|
- [ ] Clienți section
|
||||||
|
- [ ] Furnizori section
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] All sections use global pattern
|
||||||
|
- [ ] ~100 lines deleted
|
||||||
|
- [ ] Layout identical
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 2.3: Simplify Container Layout
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
|
||||||
|
**DELETE:**
|
||||||
|
```css
|
||||||
|
/* DELETE - use containers.css */
|
||||||
|
.dashboard-container {
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: var(--space-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-xl);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**REPLACE with:**
|
||||||
|
```vue
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="page-header">...</div>
|
||||||
|
<!-- Content -->
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Container uses global class
|
||||||
|
- [ ] ~30 lines deleted
|
||||||
|
- [ ] Width/padding correct
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 2.4: Remove Card Container Duplicates
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
|
||||||
|
**Already using card components from Phase 4:**
|
||||||
|
```vue
|
||||||
|
<!-- These should already be refactored -->
|
||||||
|
<MetricCard />
|
||||||
|
<CashFlowMetricCard />
|
||||||
|
<ClientiBalanceCard />
|
||||||
|
<!-- etc -->
|
||||||
|
```
|
||||||
|
|
||||||
|
**DELETE any card wrapper CSS:**
|
||||||
|
```css
|
||||||
|
/* DELETE - cards handle their own styling */
|
||||||
|
.metrics-container {
|
||||||
|
/* ... */
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-wrapper {
|
||||||
|
/* ... */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Cards render from Phase 4
|
||||||
|
- [ ] No wrapper CSS needed
|
||||||
|
- [ ] ~80 lines deleted
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 3. Table Styles Replacement (3 tasks)
|
||||||
|
|
||||||
|
#### Task 3.1: Replace Dashboard Tables
|
||||||
|
**Status:** ⏸️ | **Est:** 2 hours
|
||||||
|
|
||||||
|
**BEFORE:**
|
||||||
|
```vue
|
||||||
|
<table class="dashboard-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Dată</th>
|
||||||
|
<th>Document</th>
|
||||||
|
<th>Valoare</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<!-- ... -->
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
**AFTER:**
|
||||||
|
```vue
|
||||||
|
<table class="table table-bordered table-hover table-sm">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Dată</th>
|
||||||
|
<th>Document</th>
|
||||||
|
<th class="text-right">Valoare</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<!-- ... -->
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
**DELETE CSS (lines 899-1300 - ~400 lines!):**
|
||||||
|
```css
|
||||||
|
/* DELETE ALL - tables.css provides */
|
||||||
|
.dashboard-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
/* ... 400 lines ... */
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-table th {
|
||||||
|
/* ... */
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-table td {
|
||||||
|
/* ... */
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-table tbody tr:hover {
|
||||||
|
/* ... */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ... many more table rules ... */
|
||||||
|
```
|
||||||
|
|
||||||
|
**Test tables:**
|
||||||
|
- [ ] Vânzări table
|
||||||
|
- [ ] Achiziții table
|
||||||
|
- [ ] Recent transactions table
|
||||||
|
- [ ] All styling correct
|
||||||
|
- [ ] Hover effects work
|
||||||
|
- [ ] Responsive behavior
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] All tables use tables.css
|
||||||
|
- [ ] ~400 lines deleted
|
||||||
|
- [ ] Tables look identical
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 3.2: Add Table Utilities
|
||||||
|
**Status:** ⏸️ | **Est:** 20 min
|
||||||
|
|
||||||
|
**Use utility classes:**
|
||||||
|
```vue
|
||||||
|
<td class="text-right">{{ value }}</td>
|
||||||
|
<td class="text-center">{{ status }}</td>
|
||||||
|
<td class="font-mono">{{ number }}</td>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Numeric values right-aligned
|
||||||
|
- [ ] Status centered
|
||||||
|
- [ ] Numbers use monospace
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 3.3: Test Table Responsiveness
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
|
||||||
|
**Mobile behavior:**
|
||||||
|
- [ ] Tables scroll horizontally on mobile
|
||||||
|
- [ ] Headers sticky
|
||||||
|
- [ ] Touch-friendly row height
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Tables work on mobile
|
||||||
|
- [ ] No layout breaks
|
||||||
|
- [ ] Usable on small screens
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4. Stats & Metrics (3 tasks)
|
||||||
|
|
||||||
|
#### Task 4.1: Use Metric Card Patterns
|
||||||
|
**Status:** ⏸️ | **Est:** 1 hour
|
||||||
|
|
||||||
|
**Already done in Phase 4:**
|
||||||
|
```vue
|
||||||
|
<!-- These use global patterns now -->
|
||||||
|
<MetricCard :value="totalSales" label="Vânzări" />
|
||||||
|
```
|
||||||
|
|
||||||
|
**DELETE any remaining stat CSS:**
|
||||||
|
```css
|
||||||
|
/* DELETE - card components handle this */
|
||||||
|
.stat-display {
|
||||||
|
/* ... */
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
/* ... */
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
/* ... */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] All stats use metric cards
|
||||||
|
- [ ] ~200 lines deleted
|
||||||
|
- [ ] Displays identical
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 4.2: Remove Duplicate Trends
|
||||||
|
**Status:** ⏸️ | **Est:** 20 min
|
||||||
|
|
||||||
|
**DELETE:**
|
||||||
|
```css
|
||||||
|
/* DELETE - interactive.css provides */
|
||||||
|
.trend-up {
|
||||||
|
color: var(--color-success);
|
||||||
|
}
|
||||||
|
|
||||||
|
.trend-down {
|
||||||
|
color: var(--color-error);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**USE:**
|
||||||
|
```vue
|
||||||
|
<span class="trend trend-up">
|
||||||
|
<i class="pi pi-arrow-up trend-icon"></i>
|
||||||
|
+15%
|
||||||
|
</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] All trends use global classes
|
||||||
|
- [ ] ~30 lines deleted
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 4.3: Test All Metrics
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
|
||||||
|
- [ ] All metric values display correctly
|
||||||
|
- [ ] Trend indicators show
|
||||||
|
- [ ] Charts render
|
||||||
|
- [ ] Breakdowns expand
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 5. Responsive Consolidation (6 tasks)
|
||||||
|
|
||||||
|
**CRITICAL: Currently 4 separate breakpoints (600 lines total)**
|
||||||
|
|
||||||
|
#### Task 5.1: Audit Responsive Rules
|
||||||
|
**Status:** ⏸️ | **Est:** 1 hour
|
||||||
|
|
||||||
|
**Current breakpoints:**
|
||||||
|
```css
|
||||||
|
@media (max-width: 1200px) { /* 166 lines */ }
|
||||||
|
@media (max-width: 1024px) { /* 143 lines */ }
|
||||||
|
@media (max-width: 768px) { /* 224 lines */ }
|
||||||
|
@media (max-width: 480px) { /* 245 lines */ }
|
||||||
|
```
|
||||||
|
|
||||||
|
**Analyze:**
|
||||||
|
- [ ] What's different at each breakpoint?
|
||||||
|
- [ ] Which rules are duplicate?
|
||||||
|
- [ ] Which can use global responsive CSS?
|
||||||
|
- [ ] Which are truly component-specific?
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] All breakpoint rules documented
|
||||||
|
- [ ] Consolidation plan created
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 5.2: Extract Global Responsive to CSS
|
||||||
|
**Status:** ⏸️ | **Est:** 1 hour
|
||||||
|
|
||||||
|
**Add to dashboard.css:**
|
||||||
|
```css
|
||||||
|
/* Dashboard responsive rules */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.metrics-row {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
font-size: var(--text-2xl);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Common responsive rules in global CSS
|
||||||
|
- [ ] Apply to all dashboard views
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 5.3: Consolidate to Single Breakpoint
|
||||||
|
**Status:** ⏸️ | **Est:** 2 hours
|
||||||
|
|
||||||
|
**BEFORE (4 breakpoints):**
|
||||||
|
```css
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.dashboard-grid {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.dashboard-grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.dashboard-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
/* ... 200 more lines ... */
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
/* ... 245 lines ... */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**AFTER (1 breakpoint):**
|
||||||
|
```css
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
/* Only truly component-specific mobile rules */
|
||||||
|
.dashboard-specific-class {
|
||||||
|
/* Component-specific adjustment */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] 4 breakpoints → 1 breakpoint
|
||||||
|
- [ ] ~500 lines deleted
|
||||||
|
- [ ] Responsive behavior identical
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 5.4: Test Desktop Breakpoints
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
|
||||||
|
**Test at:**
|
||||||
|
- [ ] 1920x1080 (Full HD)
|
||||||
|
- [ ] 1366x768 (Laptop)
|
||||||
|
- [ ] 1280x720 (Small desktop)
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Layout adapts correctly
|
||||||
|
- [ ] No horizontal scroll
|
||||||
|
- [ ] All content visible
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 5.5: Test Tablet
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
|
||||||
|
**Test at:**
|
||||||
|
- [ ] 768x1024 (iPad portrait)
|
||||||
|
- [ ] 1024x768 (iPad landscape)
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Cards adapt to width
|
||||||
|
- [ ] Tables usable
|
||||||
|
- [ ] Touch targets adequate
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 5.6: Test Mobile (CRITICAL)
|
||||||
|
**Status:** ⏸️ | **Est:** 1 hour
|
||||||
|
|
||||||
|
**Test at:**
|
||||||
|
- [ ] 375x667 (iPhone SE)
|
||||||
|
- [ ] 414x896 (iPhone 11)
|
||||||
|
- [ ] 360x640 (Android)
|
||||||
|
|
||||||
|
**Real device testing:**
|
||||||
|
- [ ] Test on actual iPhone
|
||||||
|
- [ ] Test on actual Android
|
||||||
|
- [ ] Virtual keyboard doesn't break layout
|
||||||
|
- [ ] Scrolling smooth
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Perfect mobile experience
|
||||||
|
- [ ] No layout breaks
|
||||||
|
- [ ] All features accessible
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 6. Loading & Animations (3 tasks)
|
||||||
|
|
||||||
|
#### Task 6.1: Replace Loading Spinner
|
||||||
|
**Status:** ⏸️ | **Est:** 15 min
|
||||||
|
|
||||||
|
**DELETE:**
|
||||||
|
```css
|
||||||
|
/* DELETE - interactive.css provides */
|
||||||
|
.loading-spinner {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
/* ... */
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**USE:**
|
||||||
|
```vue
|
||||||
|
<div class="loading-spinner"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] ~40 lines deleted
|
||||||
|
- [ ] Spinner looks identical
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 6.2: Use Global Animations
|
||||||
|
**Status:** ⏸️ | **Est:** 15 min
|
||||||
|
|
||||||
|
**DELETE:**
|
||||||
|
```css
|
||||||
|
/* DELETE - animations.css provides */
|
||||||
|
@keyframes slideDown {
|
||||||
|
/* ... */
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
/* ... */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**USE:**
|
||||||
|
```vue
|
||||||
|
<div class="slide-down">...</div>
|
||||||
|
<div class="fade-in">...</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] ~20 lines deleted
|
||||||
|
- [ ] Animations work
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 6.3: Test Loading States
|
||||||
|
**Status:** ⏸️ | **Est:** 15 min
|
||||||
|
|
||||||
|
- [ ] Initial load shows spinner
|
||||||
|
- [ ] Data fetching shows loading
|
||||||
|
- [ ] Transitions smooth
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 7. Testing & Validation (5 tasks)
|
||||||
|
|
||||||
|
#### Task 7.1: Playwright Visual Regression
|
||||||
|
**Status:** ⏸️ | **Est:** 1 hour
|
||||||
|
|
||||||
|
**CRITICAL TEST:**
|
||||||
|
```bash
|
||||||
|
# Capture before Phase 5
|
||||||
|
npm run test:e2e -- tests/e2e/dashboard/ --update-snapshots
|
||||||
|
|
||||||
|
# After each major change, compare
|
||||||
|
npm run test:e2e -- tests/e2e/dashboard/
|
||||||
|
|
||||||
|
# Review differences
|
||||||
|
npm run test:e2e:report
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Zero unexpected differences
|
||||||
|
- [ ] All snapshots match
|
||||||
|
- [ ] Any differences approved
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 7.2: Desktop Testing (All Sizes)
|
||||||
|
**Status:** ⏸️ | **Est:** 1 hour
|
||||||
|
|
||||||
|
**Resolutions:**
|
||||||
|
- [ ] 1920x1080
|
||||||
|
- [ ] 1600x900
|
||||||
|
- [ ] 1366x768
|
||||||
|
- [ ] 1280x1024
|
||||||
|
|
||||||
|
**Check:**
|
||||||
|
- [ ] Grid layouts
|
||||||
|
- [ ] Card displays
|
||||||
|
- [ ] Tables
|
||||||
|
- [ ] Charts
|
||||||
|
- [ ] Spacing
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Perfect on all desktop sizes
|
||||||
|
- [ ] No layout shifts
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 7.3: Tablet Testing
|
||||||
|
**Status:** ⏸️ | **Est:** 45 min
|
||||||
|
|
||||||
|
- [ ] iPad portrait (768x1024)
|
||||||
|
- [ ] iPad landscape (1024x768)
|
||||||
|
- [ ] Surface (1366x768)
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Responsive layout works
|
||||||
|
- [ ] Touch interactions smooth
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 7.4: Mobile Testing (Real Devices)
|
||||||
|
**Status:** ⏸️ | **Est:** 1 hour
|
||||||
|
|
||||||
|
**Test on real devices:**
|
||||||
|
- [ ] iPhone (any model)
|
||||||
|
- [ ] Android phone
|
||||||
|
|
||||||
|
**Test all features:**
|
||||||
|
- [ ] Dashboard loads
|
||||||
|
- [ ] Cards display
|
||||||
|
- [ ] Tables scroll
|
||||||
|
- [ ] Charts tap/zoom
|
||||||
|
- [ ] Breakdowns expand
|
||||||
|
- [ ] Filters work
|
||||||
|
- [ ] Virtual keyboard doesn't break
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] 100% functional on mobile
|
||||||
|
- [ ] No usability issues
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 7.5: Measure Reduction
|
||||||
|
**Status:** ⏸️ | **Est:** 15 min
|
||||||
|
|
||||||
|
**Measure:**
|
||||||
|
```bash
|
||||||
|
# Before
|
||||||
|
wc -l src/views/DashboardView.vue.phase5.backup
|
||||||
|
# CSS lines: 2,010
|
||||||
|
|
||||||
|
# After
|
||||||
|
wc -l src/views/DashboardView.vue
|
||||||
|
# Expected total: ~2,300 (4,010 - 1,710)
|
||||||
|
|
||||||
|
# Count CSS lines in scoped section
|
||||||
|
sed -n '/^<style scoped>/,/^<\/style>/p' src/views/DashboardView.vue | wc -l
|
||||||
|
# Target: ~300
|
||||||
|
```
|
||||||
|
|
||||||
|
**Document:**
|
||||||
|
- [ ] Before: 2,010 CSS lines
|
||||||
|
- [ ] After: ___ CSS lines
|
||||||
|
- [ ] Eliminated: ___ lines
|
||||||
|
- [ ] Target: 1,710 lines (85%)
|
||||||
|
- [ ] Actual reduction: ___%
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] At least 1,500 lines eliminated (75%)
|
||||||
|
- [ ] Target: 1,710 lines (85%)
|
||||||
|
- [ ] Metrics documented
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 8. Validation & Commit (2 tasks)
|
||||||
|
|
||||||
|
#### Task 8.1: Final Validation
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
|
||||||
|
**Checklist:**
|
||||||
|
- [ ] All dashboard features work
|
||||||
|
- [ ] All charts render
|
||||||
|
- [ ] All tables display
|
||||||
|
- [ ] All cards functional
|
||||||
|
- [ ] Responsive on all sizes
|
||||||
|
- [ ] No console errors
|
||||||
|
- [ ] No CSS warnings
|
||||||
|
- [ ] Playwright tests pass
|
||||||
|
- [ ] Performance acceptable
|
||||||
|
- [ ] Target reduction achieved
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] All checks pass
|
||||||
|
- [ ] Ready for commit
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 8.2: Commit Phase 5
|
||||||
|
**Status:** ⏸️ | **Est:** 15 min
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add .
|
||||||
|
git commit -m "feat(css): Phase 5 - DashboardView major refactoring
|
||||||
|
|
||||||
|
CRITICAL REFACTORING - 85% CSS reduction
|
||||||
|
|
||||||
|
Changes:
|
||||||
|
- Reduce DashboardView.vue CSS from 2,010 to ~300 lines
|
||||||
|
- Eliminate 1,710 lines of duplicate CSS (85% reduction)
|
||||||
|
- Replace custom patterns with global CSS
|
||||||
|
- Consolidate 4 responsive breakpoints to 1
|
||||||
|
- Use tables.css for all table styling (400 lines eliminated)
|
||||||
|
- Use dashboard.css patterns (300 lines eliminated)
|
||||||
|
- Use interactive.css patterns (100 lines eliminated)
|
||||||
|
- Component now uses Phase 2-4 foundations
|
||||||
|
|
||||||
|
Impact:
|
||||||
|
- Cleaner, more maintainable code
|
||||||
|
- Consistent with rest of application
|
||||||
|
- Better performance (smaller bundle)
|
||||||
|
- Easier future modifications
|
||||||
|
|
||||||
|
Testing:
|
||||||
|
- ✅ Playwright visual regression (pixel-perfect)
|
||||||
|
- ✅ Desktop testing (1920x1080, 1366x768, 1280x720)
|
||||||
|
- ✅ Tablet testing (iPad portrait/landscape)
|
||||||
|
- ✅ Mobile testing (iPhone, Android - real devices)
|
||||||
|
- ✅ All features functional
|
||||||
|
- ✅ Zero breaking changes
|
||||||
|
|
||||||
|
Before/After:
|
||||||
|
- Total lines: 4,010 → ~2,300
|
||||||
|
- CSS lines: 2,010 → ~300
|
||||||
|
- Reduction: 1,710 lines (85%)
|
||||||
|
- Component CSS %: 50% → 13%
|
||||||
|
|
||||||
|
Phase: 5/7 complete (CRITICAL MILESTONE)
|
||||||
|
"
|
||||||
|
|
||||||
|
git push origin feature/css-refactoring
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Completion Criteria
|
||||||
|
|
||||||
|
- [ ] 1,710 CSS lines eliminated (target: 85%)
|
||||||
|
- [ ] All global patterns used
|
||||||
|
- [ ] 4 responsive breakpoints → 1
|
||||||
|
- [ ] All tables use tables.css
|
||||||
|
- [ ] Playwright tests pass
|
||||||
|
- [ ] Real device testing complete
|
||||||
|
- [ ] Zero functionality broken
|
||||||
|
- [ ] Performance improved
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Rollback Plan
|
||||||
|
|
||||||
|
If critical issues arise:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Immediate rollback
|
||||||
|
/tmp/restore-dashboard.sh
|
||||||
|
|
||||||
|
# Or from git
|
||||||
|
git checkout src/views/DashboardView.vue.phase5.backup
|
||||||
|
|
||||||
|
# Test
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Next Phase
|
||||||
|
|
||||||
|
**Phase 6:** View-uri Rămase
|
||||||
|
- Apply learnings to remaining views
|
||||||
|
- See: [phase-6-views.md](./phase-6-views.md)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Created:** 2025-11-18
|
||||||
|
**Status:** ⏸️ Not Started
|
||||||
|
**⚠️ WARNING:** Most complex phase - proceed with caution
|
||||||
298
features/phases/phase-6-views.md
Normal file
298
features/phases/phase-6-views.md
Normal file
@@ -0,0 +1,298 @@
|
|||||||
|
# Phase 6: View-uri Rămase 📄
|
||||||
|
|
||||||
|
**Priority:** Complete standardization
|
||||||
|
**Duration:** 16-20 hours
|
||||||
|
**Status:** ⏸️ Not Started
|
||||||
|
**Risk Level:** Medium
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Obiective
|
||||||
|
|
||||||
|
Apply Phase 1-5 learnings to remaining views:
|
||||||
|
1. TelegramView.vue
|
||||||
|
2. BankCashRegisterView.vue (if exists)
|
||||||
|
3. CacheStatsView.vue (if exists)
|
||||||
|
4. Any other custom views
|
||||||
|
|
||||||
|
**Target:** ~400 lines CSS eliminated
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task Breakdown (16 tasks)
|
||||||
|
|
||||||
|
### TelegramView.vue (5 tasks)
|
||||||
|
|
||||||
|
#### Task 1.1: Analyze Current CSS
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Check current state
|
||||||
|
wc -l src/views/TelegramView.vue
|
||||||
|
grep -c "^ " src/views/TelegramView.vue # Estimate CSS lines
|
||||||
|
```
|
||||||
|
|
||||||
|
**Document:**
|
||||||
|
- [ ] Total lines: ___
|
||||||
|
- [ ] CSS lines: ~218 (from analysis)
|
||||||
|
- [ ] Custom patterns identified
|
||||||
|
- [ ] Duplicates identified
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 1.2: Convert Page Header
|
||||||
|
**Status:** ⏸️ | **Est:** 20 min
|
||||||
|
|
||||||
|
**Use global pattern:**
|
||||||
|
```vue
|
||||||
|
<div class="page-header">
|
||||||
|
<h1 class="page-title">
|
||||||
|
<i class="pi pi-telegram"></i>
|
||||||
|
Integrare Telegram
|
||||||
|
</h1>
|
||||||
|
<p class="page-subtitle">...</p>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**DELETE custom header CSS (~30 lines)**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 1.3: Replace Custom Buttons
|
||||||
|
**Status:** ⏸️ | **Est:** 45 min
|
||||||
|
|
||||||
|
**BEFORE:**
|
||||||
|
```vue
|
||||||
|
<button class="generate-btn">
|
||||||
|
Generează Cod
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.generate-btn {
|
||||||
|
min-width: 200px;
|
||||||
|
padding: 12px 24px;
|
||||||
|
background: #6366f1; /* Hardcoded! */
|
||||||
|
/* ... 15 more lines ... */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
**AFTER:**
|
||||||
|
```vue
|
||||||
|
<button class="btn btn-primary btn-lg">
|
||||||
|
Generează Cod
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* No button styles needed - buttons.css provides */
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
**DELETE ~60 lines of custom button CSS**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 1.4: Use Standard Card Patterns
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
|
||||||
|
**Replace custom cards:**
|
||||||
|
```vue
|
||||||
|
<Card class="info-card">
|
||||||
|
<!-- Content -->
|
||||||
|
</Card>
|
||||||
|
```
|
||||||
|
|
||||||
|
**DELETE custom card CSS (~50 lines)**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 1.5: Test TelegramView
|
||||||
|
**Status:** ⏸️ | **Est:** 45 min
|
||||||
|
|
||||||
|
**Test:**
|
||||||
|
- [ ] Page renders correctly
|
||||||
|
- [ ] Code generation works
|
||||||
|
- [ ] QR code displays
|
||||||
|
- [ ] Link/unlink flow works
|
||||||
|
- [ ] All buttons styled correctly
|
||||||
|
|
||||||
|
**Target:** 218 → ~80 lines (138 eliminated)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Other Views (8 tasks - 4 per view x 2 views)
|
||||||
|
|
||||||
|
#### BankCashRegisterView.vue (if exists)
|
||||||
|
|
||||||
|
##### Task 2.1: Audit View
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Check if exists
|
||||||
|
ls src/views/BankCashRegisterView.vue
|
||||||
|
|
||||||
|
# Analyze
|
||||||
|
grep -n "class=" src/views/BankCashRegisterView.vue
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
##### Task 2.2: Apply Global Patterns
|
||||||
|
**Status:** ⏸️ | **Est:** 1-2 hours
|
||||||
|
|
||||||
|
- [ ] Page header
|
||||||
|
- [ ] Section headers
|
||||||
|
- [ ] Forms (use Phase 1 pattern)
|
||||||
|
- [ ] Tables (use tables.css)
|
||||||
|
- [ ] Cards (use cards.css)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
##### Task 2.3: Remove Duplicate CSS
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
|
||||||
|
**Target:** ~50% reduction
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
##### Task 2.4: Test
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
|
||||||
|
- [ ] All features work
|
||||||
|
- [ ] Visual regression pass
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### CacheStatsView.vue (if exists)
|
||||||
|
|
||||||
|
##### Task 3.1-3.4: Same Pattern
|
||||||
|
**Status:** ⏸️ | **Est:** 2-3 hours
|
||||||
|
|
||||||
|
Follow same approach:
|
||||||
|
1. Audit
|
||||||
|
2. Apply patterns
|
||||||
|
3. Remove duplicates
|
||||||
|
4. Test
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Final Integration Testing (3 tasks)
|
||||||
|
|
||||||
|
#### Task 4.1: Test All Views Together
|
||||||
|
**Status:** ⏸️ | **Est:** 1 hour
|
||||||
|
|
||||||
|
**Navigate through all views:**
|
||||||
|
- [ ] Login → Dashboard
|
||||||
|
- [ ] Dashboard → Invoices
|
||||||
|
- [ ] Dashboard → Telegram
|
||||||
|
- [ ] Dashboard → Bank/Cash (if exists)
|
||||||
|
- [ ] Check navigation consistency
|
||||||
|
- [ ] Check styling consistency
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] All views use consistent patterns
|
||||||
|
- [ ] Navigation smooth
|
||||||
|
- [ ] No layout shifts between views
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 4.2: Playwright Full Suite
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Run all tests
|
||||||
|
npm run test:e2e
|
||||||
|
|
||||||
|
# Check results
|
||||||
|
npm run test:e2e:report
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] All E2E tests pass
|
||||||
|
- [ ] No visual regressions
|
||||||
|
- [ ] All features functional
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 4.3: Performance Measurement
|
||||||
|
**Status:** ⏸️ | **Est:** 20 min
|
||||||
|
|
||||||
|
**Measure:**
|
||||||
|
```bash
|
||||||
|
# CSS bundle size
|
||||||
|
ls -lh dist/assets/*.css
|
||||||
|
|
||||||
|
# Total CSS in components
|
||||||
|
find src/ -name "*.vue" -exec grep -l "<style" {} \; | \
|
||||||
|
xargs -I {} sh -c 'sed -n "/<style/,/<\/style>/p" {} | wc -l'
|
||||||
|
```
|
||||||
|
|
||||||
|
**Document:**
|
||||||
|
- [ ] Phase 6 CSS eliminated: ~400 lines
|
||||||
|
- [ ] Total project CSS eliminated: ~3,260 lines
|
||||||
|
- [ ] Bundle size reduction: ___KB
|
||||||
|
- [ ] Performance impact: ___%
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Target reduction achieved
|
||||||
|
- [ ] Metrics documented
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Completion Criteria
|
||||||
|
|
||||||
|
- [ ] All views refactored
|
||||||
|
- [ ] ~400 lines eliminated
|
||||||
|
- [ ] Consistent patterns across all views
|
||||||
|
- [ ] All tests pass
|
||||||
|
- [ ] Performance metrics positive
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Commit
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add .
|
||||||
|
git commit -m "feat(css): Phase 6 - Refactor remaining views
|
||||||
|
|
||||||
|
Views refactored:
|
||||||
|
- TelegramView.vue: 218 → 80 lines (138 eliminated)
|
||||||
|
- BankCashRegisterView.vue: TBD
|
||||||
|
- CacheStatsView.vue: TBD
|
||||||
|
|
||||||
|
Total Phase 6 elimination: ~400 lines
|
||||||
|
|
||||||
|
Impact:
|
||||||
|
- All views now use global patterns
|
||||||
|
- Consistent styling across application
|
||||||
|
- Reduced maintenance burden
|
||||||
|
|
||||||
|
Testing:
|
||||||
|
- ✅ All view features functional
|
||||||
|
- ✅ Playwright full suite pass
|
||||||
|
- ✅ Performance improved
|
||||||
|
|
||||||
|
Cumulative Progress:
|
||||||
|
- Phases 1-6 complete
|
||||||
|
- Total CSS eliminated: ~2,860 lines
|
||||||
|
- One phase remaining (Documentation)
|
||||||
|
|
||||||
|
Phase: 6/7 complete
|
||||||
|
"
|
||||||
|
|
||||||
|
git push origin feature/css-refactoring
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Next Phase
|
||||||
|
|
||||||
|
**Phase 7:** Documentation & Finalization
|
||||||
|
- Create comprehensive documentation
|
||||||
|
- Performance report
|
||||||
|
- See: [phase-7-documentation.md](./phase-7-documentation.md)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Created:** 2025-11-18
|
||||||
|
**Status:** ⏸️ Not Started
|
||||||
893
features/phases/phase-7-documentation.md
Normal file
893
features/phases/phase-7-documentation.md
Normal file
@@ -0,0 +1,893 @@
|
|||||||
|
# Phase 7: Documentare & Finalizare 📚
|
||||||
|
|
||||||
|
**Priority:** Long-term maintainability
|
||||||
|
**Duration:** 12-16 hours
|
||||||
|
**Status:** ⏸️ Not Started
|
||||||
|
**Risk Level:** Low
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Obiective
|
||||||
|
|
||||||
|
1. **Complete pattern documentation** - CSS Patterns Library
|
||||||
|
2. **Developer guidelines** - How to use the new system
|
||||||
|
3. **Performance report** - Before/after metrics
|
||||||
|
4. **Onboarding guide** - For new developers
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task Breakdown (12 tasks)
|
||||||
|
|
||||||
|
### 1. Pattern Documentation (4 tasks)
|
||||||
|
|
||||||
|
#### Task 1.1: Create CSS Patterns Library
|
||||||
|
**Status:** ⏸️ | **Est:** 2 hours
|
||||||
|
|
||||||
|
**File:** `docs/CSS_PATTERNS.md`
|
||||||
|
|
||||||
|
**Content structure:**
|
||||||
|
```markdown
|
||||||
|
# ROA2WEB CSS Patterns Library
|
||||||
|
|
||||||
|
## Table of Contents
|
||||||
|
1. Card Patterns
|
||||||
|
2. Form Patterns
|
||||||
|
3. Button Patterns
|
||||||
|
4. Table Patterns
|
||||||
|
5. Dashboard Patterns
|
||||||
|
6. Interactive Patterns
|
||||||
|
7. Layout Patterns
|
||||||
|
8. Utility Classes
|
||||||
|
|
||||||
|
## 1. Card Patterns
|
||||||
|
|
||||||
|
### Basic Card
|
||||||
|
\`\`\`html
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3>Title</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
Content
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
\`\`\`
|
||||||
|
|
||||||
|
### Metric Card
|
||||||
|
\`\`\`html
|
||||||
|
<div class="metric-card card-hover">
|
||||||
|
<div class="metric-header">
|
||||||
|
<div class="metric-icon bg-primary-light text-primary">
|
||||||
|
<i class="pi pi-chart-bar"></i>
|
||||||
|
</div>
|
||||||
|
<div class="metric-label">Sales</div>
|
||||||
|
</div>
|
||||||
|
<div class="metric-value">$10,000</div>
|
||||||
|
</div>
|
||||||
|
\`\`\`
|
||||||
|
|
||||||
|
<!-- ... more patterns ... -->
|
||||||
|
```
|
||||||
|
|
||||||
|
**Include:**
|
||||||
|
- [ ] All card patterns with examples
|
||||||
|
- [ ] All form patterns
|
||||||
|
- [ ] All button variants
|
||||||
|
- [ ] Table patterns
|
||||||
|
- [ ] Dashboard-specific patterns
|
||||||
|
- [ ] Interactive elements (spinners, trends, collapse)
|
||||||
|
- [ ] Layout patterns
|
||||||
|
- [ ] Utility classes
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Comprehensive examples
|
||||||
|
- [ ] Live code snippets
|
||||||
|
- [ ] Use cases documented
|
||||||
|
- [ ] Screenshots included
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 1.2: Form Template & Guidelines
|
||||||
|
**Status:** ⏸️ | **Est:** 1 hour
|
||||||
|
|
||||||
|
**File:** `docs/FORM_TEMPLATE.md`
|
||||||
|
|
||||||
|
**Content:**
|
||||||
|
```markdown
|
||||||
|
# Form Template & Guidelines
|
||||||
|
|
||||||
|
## Standard Form Structure
|
||||||
|
|
||||||
|
\`\`\`vue
|
||||||
|
<template>
|
||||||
|
<form @submit.prevent="handleSubmit" class="form">
|
||||||
|
|
||||||
|
<!-- Single Field -->
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="field-id" class="form-label required">Label</label>
|
||||||
|
<input
|
||||||
|
id="field-id"
|
||||||
|
v-model="formData.field"
|
||||||
|
type="text"
|
||||||
|
class="form-input"
|
||||||
|
:class="{ 'invalid': errors.field }"
|
||||||
|
@blur="validateField('field')"
|
||||||
|
/>
|
||||||
|
<span v-if="errors.field" class="form-error">
|
||||||
|
<i class="pi pi-exclamation-circle"></i>
|
||||||
|
{{ errors.field }}
|
||||||
|
</span>
|
||||||
|
<span v-else class="form-help">
|
||||||
|
Help text
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Horizontal Fields -->
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-col">
|
||||||
|
<!-- Field 1 -->
|
||||||
|
</div>
|
||||||
|
<div class="form-col">
|
||||||
|
<!-- Field 2 -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- PrimeVue Component -->
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Dropdown</label>
|
||||||
|
<Dropdown
|
||||||
|
v-model="formData.selected"
|
||||||
|
:options="options"
|
||||||
|
option-label="label"
|
||||||
|
placeholder="Select"
|
||||||
|
class="w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Form Actions -->
|
||||||
|
<div class="form-actions">
|
||||||
|
<button type="button" class="btn btn-secondary" @click="handleCancel">
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button type="submit" class="btn btn-primary" :disabled="isSubmitting">
|
||||||
|
<i v-if="isSubmitting" class="pi pi-spin pi-spinner"></i>
|
||||||
|
Submit
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
const formData = ref({ field: '', selected: null })
|
||||||
|
const errors = ref({})
|
||||||
|
const isSubmitting = ref(false)
|
||||||
|
|
||||||
|
const validateField = (field) => {
|
||||||
|
// Validation logic
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
// Submit logic
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* NO FORM STYLES NEEDED - ALL PROVIDED BY forms.css */
|
||||||
|
/* Only add component-specific layout if absolutely necessary */
|
||||||
|
</style>
|
||||||
|
\`\`\`
|
||||||
|
|
||||||
|
## Validation Patterns
|
||||||
|
|
||||||
|
## Accessibility Guidelines
|
||||||
|
|
||||||
|
## Common Mistakes to Avoid
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
- Login form
|
||||||
|
- Filter forms
|
||||||
|
- Multi-step forms
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Complete template
|
||||||
|
- [ ] Validation examples
|
||||||
|
- [ ] Accessibility notes
|
||||||
|
- [ ] Common pitfalls documented
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 1.3: Component Styling Guidelines
|
||||||
|
**Status:** ⏸️ | **Est:** 1.5 hours
|
||||||
|
|
||||||
|
**File:** `docs/COMPONENT_STYLING.md`
|
||||||
|
|
||||||
|
**Content:**
|
||||||
|
```markdown
|
||||||
|
# Component Styling Guidelines
|
||||||
|
|
||||||
|
## When to Use Scoped Styles vs Global CSS
|
||||||
|
|
||||||
|
### ✅ Use Global CSS When:
|
||||||
|
- Pattern is used in 2+ components
|
||||||
|
- Styling follows established design system
|
||||||
|
- PrimeVue component customization
|
||||||
|
- Layout patterns
|
||||||
|
- Utility classes
|
||||||
|
|
||||||
|
### ✅ Use Scoped Styles When:
|
||||||
|
- Truly component-specific logic
|
||||||
|
- Complex component state styling
|
||||||
|
- Third-party library integration (Chart.js, etc.)
|
||||||
|
- One-off unique components
|
||||||
|
|
||||||
|
### ❌ NEVER Do:
|
||||||
|
- Duplicate existing patterns
|
||||||
|
- Override PrimeVue with :deep() in components
|
||||||
|
- Hardcode colors/sizes (use design tokens)
|
||||||
|
- Use !important in scoped styles
|
||||||
|
- Create custom form/button/card base styles
|
||||||
|
|
||||||
|
## Decision Tree
|
||||||
|
|
||||||
|
\`\`\`
|
||||||
|
Need to style a component?
|
||||||
|
│
|
||||||
|
├─ Does this pattern exist in another component?
|
||||||
|
│ ├─ YES → Use global CSS
|
||||||
|
│ └─ NO → Continue
|
||||||
|
│
|
||||||
|
├─ Is this a form/button/card/table?
|
||||||
|
│ ├─ YES → Use global CSS (components/forms.css, etc.)
|
||||||
|
│ └─ NO → Continue
|
||||||
|
│
|
||||||
|
├─ Is this a PrimeVue component?
|
||||||
|
│ ├─ YES → Check vendor/primevue-overrides.css
|
||||||
|
│ └─ NO → Continue
|
||||||
|
│
|
||||||
|
└─ Truly unique to this component?
|
||||||
|
├─ YES → Scoped styles OK
|
||||||
|
└─ NO → Extract to global pattern
|
||||||
|
\`\`\`
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### ❌ Bad: Duplicate Pattern
|
||||||
|
\`\`\`vue
|
||||||
|
<style scoped>
|
||||||
|
.my-card {
|
||||||
|
background: var(--color-bg);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
/* ... duplicating cards.css ... */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
\`\`\`
|
||||||
|
|
||||||
|
### ✅ Good: Use Global
|
||||||
|
\`\`\`vue
|
||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<!-- Content -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* No card styles needed */
|
||||||
|
</style>
|
||||||
|
\`\`\`
|
||||||
|
|
||||||
|
### ❌ Bad: PrimeVue Override
|
||||||
|
\`\`\`vue
|
||||||
|
<style scoped>
|
||||||
|
:deep(.p-inputtext) {
|
||||||
|
border: 2px solid #3b82f6 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
\`\`\`
|
||||||
|
|
||||||
|
### ✅ Good: Global Override
|
||||||
|
All PrimeVue styling in vendor/primevue-overrides.css
|
||||||
|
|
||||||
|
### ✅ Good: Component-Specific
|
||||||
|
\`\`\`vue
|
||||||
|
<style scoped>
|
||||||
|
/* Chart.js canvas sizing (truly component-specific) */
|
||||||
|
.chart-canvas {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
\`\`\`
|
||||||
|
|
||||||
|
## Code Review Checklist
|
||||||
|
- [ ] No duplicate patterns from global CSS
|
||||||
|
- [ ] Design tokens used (no hardcoded values)
|
||||||
|
- [ ] No :deep() for PrimeVue
|
||||||
|
- [ ] No !important (except vendor overrides)
|
||||||
|
- [ ] Scoped styles < 50 lines (rule of thumb)
|
||||||
|
- [ ] Responsive handled globally when possible
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Clear decision tree
|
||||||
|
- [ ] Good/bad examples
|
||||||
|
- [ ] Code review checklist
|
||||||
|
- [ ] Best practices documented
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 1.4: Styling Best Practices
|
||||||
|
**Status:** ⏸️ | **Est:** 1 hour
|
||||||
|
|
||||||
|
**File:** `docs/STYLING_GUIDELINES.md`
|
||||||
|
|
||||||
|
**Content:**
|
||||||
|
- Design token usage
|
||||||
|
- Naming conventions
|
||||||
|
- File organization
|
||||||
|
- Performance considerations
|
||||||
|
- Accessibility requirements
|
||||||
|
- Browser compatibility
|
||||||
|
- Testing guidelines
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Comprehensive guidelines
|
||||||
|
- [ ] Examples provided
|
||||||
|
- [ ] References to pattern library
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2. Code Documentation (2 tasks)
|
||||||
|
|
||||||
|
#### Task 2.1: Add JSDoc Comments to CSS Files
|
||||||
|
**Status:** ⏸️ | **Est:** 2 hours
|
||||||
|
|
||||||
|
**Add to all CSS files in assets/css/:**
|
||||||
|
|
||||||
|
```css
|
||||||
|
/**
|
||||||
|
* Interactive Patterns - ROA2WEB
|
||||||
|
*
|
||||||
|
* Reusable interactive UI patterns including loading states,
|
||||||
|
* trend indicators, collapsible sections, and animations.
|
||||||
|
*
|
||||||
|
* @file interactive.css
|
||||||
|
* @version 2.0.0
|
||||||
|
* @since Phase 2 - CSS Refactoring
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Loading Spinner
|
||||||
|
*
|
||||||
|
* Displays an animated loading indicator.
|
||||||
|
*
|
||||||
|
* @class loading-spinner
|
||||||
|
* @modifier loading-spinner-sm - Small variant (24px)
|
||||||
|
* @modifier loading-spinner-lg - Large variant (56px)
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* <div class="loading-spinner"></div>
|
||||||
|
* <div class="loading-spinner loading-spinner-lg"></div>
|
||||||
|
*/
|
||||||
|
.loading-spinner {
|
||||||
|
/* ... */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Add comments to:**
|
||||||
|
- [ ] patterns/interactive.css
|
||||||
|
- [ ] patterns/dashboard.css
|
||||||
|
- [ ] patterns/animations.css
|
||||||
|
- [ ] components/cards.css (additions)
|
||||||
|
- [ ] vendor/primevue-overrides.css
|
||||||
|
- [ ] core/tokens.css
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] All major patterns documented
|
||||||
|
- [ ] Usage examples in comments
|
||||||
|
- [ ] Version/phase noted
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 2.2: Design Token Documentation
|
||||||
|
**Status:** ⏸️ | **Est:** 1 hour
|
||||||
|
|
||||||
|
**File:** `docs/DESIGN_TOKENS.md`
|
||||||
|
|
||||||
|
**Document all tokens:**
|
||||||
|
```markdown
|
||||||
|
# Design Tokens Reference
|
||||||
|
|
||||||
|
## Spacing Scale
|
||||||
|
|
||||||
|
| Token | Value | Use Case |
|
||||||
|
|-------|-------|----------|
|
||||||
|
| --space-xs | 0.25rem (4px) | Tight spacing, icon gaps |
|
||||||
|
| --space-sm | 0.5rem (8px) | Default gap between related items |
|
||||||
|
| --space-md | 1rem (16px) | Standard component padding |
|
||||||
|
| --space-lg | 1.5rem (24px) | Section padding |
|
||||||
|
| --space-xl | 2rem (32px) | Page margins |
|
||||||
|
| --space-2xl | 3rem (48px) | Large separations |
|
||||||
|
| --space-3xl | 4rem (64px) | Hero sections |
|
||||||
|
|
||||||
|
## Typography Scale
|
||||||
|
|
||||||
|
## Color Palette
|
||||||
|
|
||||||
|
## Shadows
|
||||||
|
|
||||||
|
## Border Radius
|
||||||
|
|
||||||
|
## Transitions
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] All tokens documented
|
||||||
|
- [ ] Use cases provided
|
||||||
|
- [ ] Visual examples
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 3. Performance Report (3 tasks)
|
||||||
|
|
||||||
|
#### Task 3.1: Before/After Metrics
|
||||||
|
**Status:** ⏸️ | **Est:** 1.5 hours
|
||||||
|
|
||||||
|
**File:** `docs/PERFORMANCE_REPORT.md`
|
||||||
|
|
||||||
|
**Measure and document:**
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
# CSS Refactoring Performance Report
|
||||||
|
|
||||||
|
## Executive Summary
|
||||||
|
|
||||||
|
**Project:** ROA2WEB Frontend CSS Refactoring
|
||||||
|
**Duration:** [Start Date] - [End Date]
|
||||||
|
**Total Effort:** X hours
|
||||||
|
**Status:** ✅ Complete
|
||||||
|
|
||||||
|
## Code Reduction Metrics
|
||||||
|
|
||||||
|
### Overall Statistics
|
||||||
|
|
||||||
|
| Metric | Before | After | Change |
|
||||||
|
|--------|--------|-------|--------|
|
||||||
|
| Total Vue component CSS | ~6,000 lines | ~2,500 lines | -58% ✅ |
|
||||||
|
| DashboardView.vue CSS | 2,010 lines | 300 lines | -85% ✅ |
|
||||||
|
| Card components CSS | 1,230 lines | 380 lines | -69% ✅ |
|
||||||
|
| Form CSS duplicates | 3 patterns | 1 pattern | -67% ✅ |
|
||||||
|
| PrimeVue :deep() overrides | 50+ instances | 0 instances | -100% ✅ |
|
||||||
|
| Hardcoded values | ~150 instances | ~20 instances | -87% ✅ |
|
||||||
|
| CSS files in assets/css/ | 17 files | 22 files | +5 files |
|
||||||
|
| Global CSS lines | ~2,000 lines | ~2,600 lines | +30% |
|
||||||
|
|
||||||
|
### By Phase
|
||||||
|
|
||||||
|
| Phase | CSS Eliminated | Time Spent |
|
||||||
|
|-------|----------------|------------|
|
||||||
|
| Phase 1: Forms | 150 lines | Xh |
|
||||||
|
| Phase 2: Foundation | 0 lines (setup) | Xh |
|
||||||
|
| Phase 3: PrimeVue | 150 lines | Xh |
|
||||||
|
| Phase 4: Cards | 850 lines | Xh |
|
||||||
|
| Phase 5: Dashboard | 1,710 lines | Xh |
|
||||||
|
| Phase 6: Views | 400 lines | Xh |
|
||||||
|
| Phase 7: Docs | 0 lines | Xh |
|
||||||
|
| **TOTAL** | **3,260 lines** | **Xh** |
|
||||||
|
|
||||||
|
## Performance Metrics
|
||||||
|
|
||||||
|
### Bundle Size
|
||||||
|
|
||||||
|
| Asset | Before | After | Change |
|
||||||
|
|-------|--------|-------|--------|
|
||||||
|
| CSS bundle | X KB | Y KB | -Z KB (-W%) |
|
||||||
|
| Gzipped CSS | X KB | Y KB | -Z KB (-W%) |
|
||||||
|
|
||||||
|
### Load Performance
|
||||||
|
|
||||||
|
| Metric | Before | After | Change |
|
||||||
|
|--------|--------|-------|--------|
|
||||||
|
| First Contentful Paint | X ms | Y ms | -Z ms |
|
||||||
|
| Largest Contentful Paint | X ms | Y ms | -Z ms |
|
||||||
|
| Total Blocking Time | X ms | Y ms | -Z ms |
|
||||||
|
| Cumulative Layout Shift | X | Y | -Z |
|
||||||
|
| Lighthouse Performance | X/100 | Y/100 | +Z |
|
||||||
|
|
||||||
|
### Page-Specific Metrics
|
||||||
|
|
||||||
|
#### Dashboard Page
|
||||||
|
- Load time: X ms → Y ms (-Z%)
|
||||||
|
- CSS parse time: X ms → Y ms (-Z%)
|
||||||
|
- Render time: X ms → Y ms (-Z%)
|
||||||
|
|
||||||
|
#### Invoices Page
|
||||||
|
- Load time: X ms → Y ms (-Z%)
|
||||||
|
|
||||||
|
## Quality Improvements
|
||||||
|
|
||||||
|
### Code Quality
|
||||||
|
|
||||||
|
✅ Eliminated all :deep() PrimeVue overrides
|
||||||
|
✅ Removed all hardcoded colors/sizes
|
||||||
|
✅ Standardized form patterns across app
|
||||||
|
✅ Consistent card components
|
||||||
|
✅ Centralized responsive breakpoints
|
||||||
|
|
||||||
|
### Maintainability
|
||||||
|
|
||||||
|
✅ New component creation time: 2h → 30min
|
||||||
|
✅ Pattern documentation complete
|
||||||
|
✅ Developer guidelines established
|
||||||
|
✅ Onboarding time reduced
|
||||||
|
|
||||||
|
## Testing Results
|
||||||
|
|
||||||
|
### Visual Regression
|
||||||
|
- Total Playwright tests: X
|
||||||
|
- Passing: X (100%)
|
||||||
|
- Visual regressions: 0
|
||||||
|
|
||||||
|
### Browser Compatibility
|
||||||
|
- ✅ Chrome
|
||||||
|
- ✅ Firefox
|
||||||
|
- ✅ Safari
|
||||||
|
- ✅ Edge
|
||||||
|
|
||||||
|
### Device Testing
|
||||||
|
- ✅ Desktop (multiple resolutions)
|
||||||
|
- ✅ Tablet (iPad)
|
||||||
|
- ✅ Mobile (iPhone, Android)
|
||||||
|
|
||||||
|
## Lessons Learned
|
||||||
|
|
||||||
|
### What Went Well
|
||||||
|
1. Phased approach reduced risk
|
||||||
|
2. Playwright snapshots caught regressions early
|
||||||
|
3. Design token system very effective
|
||||||
|
4. Team collaboration excellent
|
||||||
|
|
||||||
|
### Challenges
|
||||||
|
1. DashboardView complexity
|
||||||
|
2. PrimeVue override coordination
|
||||||
|
3. Responsive consolidation tricky
|
||||||
|
|
||||||
|
### Recommendations for Future
|
||||||
|
1. Enforce pattern usage in code reviews
|
||||||
|
2. Regular CSS audits (quarterly)
|
||||||
|
3. Update Playwright snapshots with releases
|
||||||
|
4. Onboard new developers with pattern library
|
||||||
|
|
||||||
|
## ROI Analysis
|
||||||
|
|
||||||
|
### Time Investment
|
||||||
|
- Total hours: X hours
|
||||||
|
- Estimated future savings: Y hours/year
|
||||||
|
- ROI period: Z months
|
||||||
|
|
||||||
|
### Benefits
|
||||||
|
- Faster feature development
|
||||||
|
- Reduced bugs
|
||||||
|
- Better performance
|
||||||
|
- Easier maintenance
|
||||||
|
- Consistent UX
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] All metrics collected
|
||||||
|
- [ ] Before/after documented
|
||||||
|
- [ ] ROI calculated
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 3.2: Lighthouse Comparison
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
|
||||||
|
**Run Lighthouse before/after:**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Install lighthouse CLI
|
||||||
|
npm install -g lighthouse
|
||||||
|
|
||||||
|
# Run reports
|
||||||
|
lighthouse http://localhost:3000 --output html --output-path ./before-report.html
|
||||||
|
lighthouse http://localhost:3000 --output html --output-path ./after-report.html
|
||||||
|
|
||||||
|
# Compare
|
||||||
|
```
|
||||||
|
|
||||||
|
**Document:**
|
||||||
|
- [ ] Performance score
|
||||||
|
- [ ] First Contentful Paint
|
||||||
|
- [ ] Largest Contentful Paint
|
||||||
|
- [ ] Total Blocking Time
|
||||||
|
- [ ] Cumulative Layout Shift
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Reports generated
|
||||||
|
- [ ] Comparison documented
|
||||||
|
- [ ] Improvements highlighted
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 3.3: Bundle Analysis
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Build with analysis
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# Check bundle sizes
|
||||||
|
ls -lh dist/assets/*.css
|
||||||
|
du -sh dist/assets/
|
||||||
|
|
||||||
|
# Compare with baseline
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Bundle sizes compared
|
||||||
|
- [ ] CSS reduction quantified
|
||||||
|
- [ ] Gzip sizes measured
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4. Final Deliverables (3 tasks)
|
||||||
|
|
||||||
|
#### Task 4.1: Developer Onboarding Guide
|
||||||
|
**Status:** ⏸️ | **Est:** 1.5 hours
|
||||||
|
|
||||||
|
**File:** `docs/ONBOARDING_CSS.md`
|
||||||
|
|
||||||
|
**Content:**
|
||||||
|
```markdown
|
||||||
|
# CSS System Onboarding Guide
|
||||||
|
|
||||||
|
## Welcome to ROA2WEB CSS Architecture
|
||||||
|
|
||||||
|
This guide will help you understand our CSS system and start contributing quickly.
|
||||||
|
|
||||||
|
## Quick Start (5 minutes)
|
||||||
|
|
||||||
|
1. **Read the pattern library:**
|
||||||
|
`docs/CSS_PATTERNS.md`
|
||||||
|
|
||||||
|
2. **Understand the structure:**
|
||||||
|
- `assets/css/core/` - Design tokens, reset
|
||||||
|
- `assets/css/patterns/` - Reusable patterns
|
||||||
|
- `assets/css/components/` - Component styles
|
||||||
|
- `assets/css/vendor/` - Third-party overrides
|
||||||
|
|
||||||
|
3. **Golden rules:**
|
||||||
|
- ✅ Use global patterns
|
||||||
|
- ❌ Don't duplicate CSS
|
||||||
|
- ✅ Use design tokens
|
||||||
|
- ❌ No hardcoded values
|
||||||
|
- ✅ Scoped styles for unique logic only
|
||||||
|
|
||||||
|
## Your First Component (15 minutes)
|
||||||
|
|
||||||
|
### Example: Creating a Status Badge
|
||||||
|
|
||||||
|
1. **Check if pattern exists:**
|
||||||
|
```bash
|
||||||
|
grep -r "badge" src/assets/css/
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **If not exists, check similarity:**
|
||||||
|
- Similar to buttons? Use button patterns
|
||||||
|
- Similar to tags? Create new pattern
|
||||||
|
|
||||||
|
3. **Create component:**
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<span class="badge badge-success">Active</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* No badge styles needed - assuming badges.css exists */
|
||||||
|
/* Only component-specific layout if needed */
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Common Tasks
|
||||||
|
|
||||||
|
### Adding a New Form
|
||||||
|
→ See `docs/FORM_TEMPLATE.md`
|
||||||
|
|
||||||
|
### Creating a Dashboard Card
|
||||||
|
→ See `docs/CSS_PATTERNS.md` - Card Patterns
|
||||||
|
|
||||||
|
### Styling a Table
|
||||||
|
→ Use `tables.css` classes
|
||||||
|
|
||||||
|
### Customizing PrimeVue
|
||||||
|
→ Edit `vendor/primevue-overrides.css` (NEVER in components)
|
||||||
|
|
||||||
|
## Code Review Checklist
|
||||||
|
|
||||||
|
Before submitting PR:
|
||||||
|
- [ ] No CSS duplication
|
||||||
|
- [ ] Design tokens used
|
||||||
|
- [ ] No :deep() in components
|
||||||
|
- [ ] Pattern library consulted
|
||||||
|
- [ ] Responsive tested
|
||||||
|
- [ ] Playwright tests pass
|
||||||
|
|
||||||
|
## Need Help?
|
||||||
|
|
||||||
|
- **Pattern Library:** `docs/CSS_PATTERNS.md`
|
||||||
|
- **Guidelines:** `docs/COMPONENT_STYLING.md`
|
||||||
|
- **Tokens Reference:** `docs/DESIGN_TOKENS.md`
|
||||||
|
- **Ask the team:** #frontend-css channel
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Quick start guide
|
||||||
|
- [ ] First component tutorial
|
||||||
|
- [ ] Common tasks documented
|
||||||
|
- [ ] Resources linked
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 4.2: Update Main README
|
||||||
|
**Status:** ⏸️ | **Est:** 30 min
|
||||||
|
|
||||||
|
**Update:** `reports-app/frontend/README.md`
|
||||||
|
|
||||||
|
**Add section:**
|
||||||
|
```markdown
|
||||||
|
## CSS Architecture
|
||||||
|
|
||||||
|
ROA2WEB uses a structured CSS system with design tokens and reusable patterns.
|
||||||
|
|
||||||
|
### Documentation
|
||||||
|
- **[CSS Patterns Library](../../docs/CSS_PATTERNS.md)** - All available patterns with examples
|
||||||
|
- **[Component Styling Guidelines](../../docs/COMPONENT_STYLING.md)** - When to use global vs scoped CSS
|
||||||
|
- **[Form Template](../../docs/FORM_TEMPLATE.md)** - Standard form structure
|
||||||
|
- **[Design Tokens](../../docs/DESIGN_TOKENS.md)** - Available CSS variables
|
||||||
|
- **[Onboarding Guide](../../docs/ONBOARDING_CSS.md)** - Quick start for new developers
|
||||||
|
|
||||||
|
### Quick Reference
|
||||||
|
|
||||||
|
**CSS Structure:**
|
||||||
|
```
|
||||||
|
src/assets/css/
|
||||||
|
├── core/ # Design tokens, typography
|
||||||
|
├── patterns/ # Interactive, dashboard, animations
|
||||||
|
├── components/ # Cards, forms, buttons, tables
|
||||||
|
├── vendor/ # PrimeVue overrides
|
||||||
|
└── utilities/ # Spacing, text, flex, colors
|
||||||
|
```
|
||||||
|
|
||||||
|
**Golden Rules:**
|
||||||
|
- ✅ Use global patterns (check `docs/CSS_PATTERNS.md` first)
|
||||||
|
- ✅ Use design tokens (`var(--color-primary)` not `#3b82f6`)
|
||||||
|
- ❌ No `:deep()` PrimeVue overrides in components
|
||||||
|
- ❌ No CSS duplication
|
||||||
|
- ❌ No hardcoded values
|
||||||
|
|
||||||
|
### Before You Code
|
||||||
|
1. Check if pattern exists in `docs/CSS_PATTERNS.md`
|
||||||
|
2. Use design tokens from `core/variables.css` and `core/tokens.css`
|
||||||
|
3. PrimeVue customization goes in `vendor/primevue-overrides.css`
|
||||||
|
4. Keep scoped styles minimal (< 50 lines)
|
||||||
|
|
||||||
|
### Testing
|
||||||
|
```bash
|
||||||
|
npm run test:e2e # Visual regression tests
|
||||||
|
```
|
||||||
|
```
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] README updated
|
||||||
|
- [ ] Links to documentation
|
||||||
|
- [ ] Quick reference included
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Task 4.3: Project Completion Report
|
||||||
|
**Status:** ⏸️ | **Est:** 1 hour
|
||||||
|
|
||||||
|
**File:** `features/CSS_REFACTORING_COMPLETION.md`
|
||||||
|
|
||||||
|
**Final report with:**
|
||||||
|
- [ ] Executive summary
|
||||||
|
- [ ] All phases completed
|
||||||
|
- [ ] Final metrics
|
||||||
|
- [ ] Lessons learned
|
||||||
|
- [ ] Future recommendations
|
||||||
|
- [ ] Team acknowledgments
|
||||||
|
|
||||||
|
**Acceptance Criteria:**
|
||||||
|
- [ ] Comprehensive completion report
|
||||||
|
- [ ] Stakeholder-ready
|
||||||
|
- [ ] Archived for reference
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Final Commit & Merge
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Commit Phase 7
|
||||||
|
git add .
|
||||||
|
git commit -m "docs(css): Phase 7 - Complete documentation and performance report
|
||||||
|
|
||||||
|
Documentation created:
|
||||||
|
- docs/CSS_PATTERNS.md - Complete pattern library
|
||||||
|
- docs/FORM_TEMPLATE.md - Standard form template
|
||||||
|
- docs/COMPONENT_STYLING.md - Styling guidelines
|
||||||
|
- docs/STYLING_GUIDELINES.md - Best practices
|
||||||
|
- docs/DESIGN_TOKENS.md - Token reference
|
||||||
|
- docs/PERFORMANCE_REPORT.md - Before/after metrics
|
||||||
|
- docs/ONBOARDING_CSS.md - Developer onboarding
|
||||||
|
|
||||||
|
Code documentation:
|
||||||
|
- JSDoc comments added to all CSS files
|
||||||
|
- Usage examples in comments
|
||||||
|
- Version tracking
|
||||||
|
|
||||||
|
Performance report:
|
||||||
|
- 3,260 CSS lines eliminated (58% reduction)
|
||||||
|
- Bundle size reduced by X%
|
||||||
|
- Lighthouse score improved by +Y points
|
||||||
|
- Load time improved by Z%
|
||||||
|
|
||||||
|
Final deliverables:
|
||||||
|
- Complete pattern library
|
||||||
|
- Developer onboarding guide
|
||||||
|
- Performance analysis
|
||||||
|
- Code review checklist
|
||||||
|
|
||||||
|
PHASE 7/7 COMPLETE ✅
|
||||||
|
PROJECT COMPLETE ✅
|
||||||
|
"
|
||||||
|
|
||||||
|
git push origin feature/css-refactoring
|
||||||
|
|
||||||
|
# Create PR
|
||||||
|
gh pr create \
|
||||||
|
--title "CSS Architecture Refactoring - Complete (7 Phases)" \
|
||||||
|
--body "$(cat features/CSS_REFACTORING_COMPLETION.md)" \
|
||||||
|
--base main
|
||||||
|
|
||||||
|
# Await review and merge
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Project Completion Criteria
|
||||||
|
|
||||||
|
- [ ] All 7 phases complete
|
||||||
|
- [ ] ~3,260 CSS lines eliminated
|
||||||
|
- [ ] Complete documentation
|
||||||
|
- [ ] Performance report generated
|
||||||
|
- [ ] Developer onboarding ready
|
||||||
|
- [ ] PR created and approved
|
||||||
|
- [ ] Merged to main
|
||||||
|
- [ ] Deployed to production
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Celebration! 🎉
|
||||||
|
|
||||||
|
**You've completed a major CSS refactoring project:**
|
||||||
|
- 7 phases over 5-6 weeks
|
||||||
|
- 92-120 hours of work
|
||||||
|
- 58% CSS reduction
|
||||||
|
- Complete documentation
|
||||||
|
- Improved performance
|
||||||
|
- Better maintainability
|
||||||
|
|
||||||
|
**Impact:**
|
||||||
|
- Faster development
|
||||||
|
- Easier onboarding
|
||||||
|
- Consistent UX
|
||||||
|
- Better performance
|
||||||
|
- Reduced technical debt
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Created:** 2025-11-18
|
||||||
|
**Status:** ⏸️ Not Started (Final Phase)
|
||||||
Reference in New Issue
Block a user