roa2web-service-auto/features/phases/phase-5-dashboard.md

# 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