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

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