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

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

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

/* 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:

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

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

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

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:

# 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

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

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

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

---

Created: 2025-11-18 Status: ⏸️ Not Started