roa2web-service-auto/features/phases/phase-6-views.md

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

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

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

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

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

<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

# 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

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

# 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

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

---

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