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

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

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

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

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

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

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

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

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

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

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

<!-- These should already be refactored -->
<MetricCard />
<CashFlowMetricCard />
<ClientiBalanceCard />
<!-- etc -->

DELETE any card wrapper 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:

<table class="dashboard-table">
  <thead>
    <tr>
      <th>Dată</th>
      <th>Document</th>
      <th>Valoare</th>
    </tr>
  </thead>
  <tbody>
    <!-- ... -->
  </tbody>
</table>

AFTER:

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

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

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

<!-- These use global patterns now -->
<MetricCard :value="totalSales" label="Vânzări" />

DELETE any remaining stat 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:

/* DELETE - interactive.css provides */
.trend-up {
  color: var(--color-success);
}

.trend-down {
  color: var(--color-error);
}

USE:

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

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

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

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

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

/* DELETE - interactive.css provides */
.loading-spinner {
  width: 40px;
  height: 40px;
  /* ... */
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

USE:

<div class="loading-spinner"></div>

Acceptance Criteria:

• ~40 lines deleted
• Spinner looks identical

---

Task 6.2: Use Global Animations

Status: ⏸️ | Est: 15 min

DELETE:

/* DELETE - animations.css provides */
@keyframes slideDown {
  /* ... */
}

@keyframes fadeIn {
  /* ... */
}

USE:

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

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

# 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

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:

# 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

---

Created: 2025-11-18 Status: ⏸️ Not Started ⚠️ WARNING: Most complex phase - proceed with caution