roa2web-service-auto/features/phases/phase-3-primevue.md

# 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