# 🔵 Finance Module — Navbar Title & Vertical Alignment Fix Blueprint

**Date:** 2026-07-26  
**Author:** Architect Mode  
**Status:** Pending Code Mode Execution  
**Priority:** MEDIUM — UX polish

---

## STEP 1: LOGO NAVIGATION ANALYSIS

**File:** [`HeaderLogo.vue`](frontend_app/src/components/header/HeaderLogo.vue)

**Finding:** The logo ALREADY navigates to `/dashboard` correctly (line 37). The [`targetRoute`](frontend_app/src/components/header/HeaderLogo.vue:32-38) computed property checks if the user is on an `/organization/` page (routes to org root), otherwise routes to `/dashboard`.

**Conclusion:** Logo navigation is already correct. If it doesn't work on the Garage page, the issue is likely a z-index/CSS `pointer-events` conflict with the dark overlay in FleetView. But the `router-link` itself is properly configured.

**No code changes needed for the logo.**

---

## STEP 2: TOP NAVBAR TITLE RESTORATION

**The Problem:** Previous blueprints removed ALL `<Teleport to="#header-teleport-target">` usage from finance views. This removed BOTH the back button AND the page title. We need the title back in the navbar center, but WITHOUT the back button.

**The Solution (Cleanest approach):** Inject the title directly from [`FinanceLayout.vue`](frontend_app/src/layouts/FinanceLayout.vue) using the `#center` slot of `BaseHeader`. The layout component already knows which route is active via `useRoute()`. It can compute a dynamic title for the center slot.

**Current FinanceLayout `#center` slot:**
```html
<template #center>
  <!-- Teleport target for child route page titles -->
</template>
```

**Fix:** Replace with:
```html
<template #center>
  <span class="text-white font-bold text-sm tracking-wide">{{ financeTitle }}</span>
</template>
```

**Add computed in script:**
```ts
const financeTitle = computed(() => {
  if (route.path === '/finance') return '💰 ' + t('menu.finance')
  if (route.path.startsWith('/finance/wallets')) return '💰 ' + t('finance.wallet')
  if (route.path.startsWith('/finance/packages')) return '📦 ' + t('subscription.title')
  if (route.path.startsWith('/finance/transactions')) return '📋 ' + t('finance.transactionHistory')
  return '💰 ' + t('menu.finance')
})
```

This puts the title in the navbar center WITHOUT any Teleport from child views. No Teleport lifecycle issues. No back button duplication. The title appears in the exact same spot as the original Teleported title did.

**Also:** Remove the duplicate `<h1>` titles from all 4 finance views' local content headers since the title is now in the navbar. Keep the back button in the local header (right-aligned).

---

## STEP 3: VERTICAL ALIGNMENT FIX — Push Cards to Bottom

**The Problem:** The FleetView clone used `py-8` (top-aligned), but the user wants cards at the bottom of the screen (like the Dashboard).

**Dashboard pattern (from [`DashboardView.vue`](frontend_app/src/views/DashboardView.vue:39)):**
```html
<div class="flex flex-col justify-end min-h-[85vh] pb-8">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 w-full">
    <!-- cards -->
  </div>
</div>
```

**Current FinanceMainView (after FleetView clone):**
```html
<div class="relative z-10 mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
  <!-- header + cards -->
</div>
```

**Fix — Hybrid approach (FleetView container + Dashboard bottom-alignment):**

Each finance view's outer structure should become:
```html
<div class="relative min-h-screen">
  <div class="relative z-10 mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8 flex flex-col justify-end min-h-[85vh] pb-8">
    <!-- back button row (right-aligned, no title) -->
    <div class="mb-8 flex items-center justify-end">
      <button @click="router.push('/dashboard')" ...>{{ t('garage.backToDashboard') }}</button>
    </div>
    <!-- cards grid -->
  </div>
</div>
```

Key points:
- Outer `relative min-h-screen` stays (for z-index context)
- Inner container gets BOTH `mx-auto max-w-7xl...` (responsive width) AND `flex flex-col justify-end min-h-[85vh] pb-8` (bottom alignment)
- Header simplified to just a right-aligned back button (no title — title is in navbar)
- Same pattern applied to all 4 finance views

---

## STEP 4: CODE MODE HAND-OFF — Explicit Task List

### Task 1: Add dynamic title to FinanceLayout navbar center

**File:** [`frontend_app/src/layouts/FinanceLayout.vue`](frontend_app/src/layouts/FinanceLayout.vue)

1. **Replace the `#center` slot** (currently empty with just a comment):
   ```html
   <template #center>
     <span class="text-white font-bold text-sm tracking-wide">{{ financeTitle }}</span>
   </template>
   ```

2. **Add `computed` import** (if not present — it was removed in previous cleanup, so add back):
   ```ts
   import { computed } from 'vue'
   ```
   Add to existing `vue` import line alongside `useI18n`.

3. **Add `useRoute` import:**
   ```ts
   import { useRoute } from 'vue-router'
   ```
   (Was removed in previous cleanup — add back)

4. **Add route and computed after `const { t } = useI18n()`:**
   ```ts
   const route = useRoute()

   const financeTitle = computed(() => {
     if (route.path === '/finance') return '💰 ' + t('menu.finance')
     if (route.path.startsWith('/finance/wallets')) return '💰 ' + t('finance.wallet')
     if (route.path.startsWith('/finance/packages')) return '📦 ' + t('subscription.title')
     if (route.path.startsWith('/finance/transactions')) return '📋 ' + t('finance.transactionHistory')
     return '💰 ' + t('menu.finance')
   })
   ```

### Task 2: Fix vertical alignment + simplify header in FinanceMainView

**File:** [`frontend_app/src/views/FinanceMainView.vue`](frontend_app/src/views/FinanceMainView.vue)

**Change the outer container structure (lines 39-40):**

FROM:
```html
<div class="relative z-10 mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
```

TO:
```html
<div class="relative z-10 mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8 flex flex-col justify-end min-h-[85vh] pb-8">
```

**Simplify the header (lines 41-57):** Remove the left-side `<h1>` title (it's now in the navbar). Keep only the right-aligned back button:

```html
    <!-- ── Back button (title in top navbar) ── -->
    <div class="mb-8 flex items-center justify-end">
      <button
        @click="router.push('/dashboard')"
        class="flex items-center gap-2 rounded-xl bg-white/10 px-4 py-2 text-sm text-white/80 transition-all duration-200 hover:bg-white/20 hover:text-white"
      >
        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
        </svg>
        {{ t('garage.backToDashboard') }}
      </button>
    </div>
```

### Task 3: Fix vertical alignment + simplify header in FinanceWalletsView

**File:** [`frontend_app/src/views/FinanceWalletsView.vue`](frontend_app/src/views/FinanceWalletsView.vue)

1. Change outer container to `relative z-10 mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8 flex flex-col justify-end min-h-[85vh] pb-8`
2. Simplify header to right-aligned back button only (same pattern as Task 2), pointing to `/finance`

### Task 4: Fix vertical alignment + simplify header in FinancePackagesView

**File:** [`frontend_app/src/views/FinancePackagesView.vue`](frontend_app/src/views/FinancePackagesView.vue)

Same as Task 3 — right-aligned back button to `/finance`, no title.

### Task 5: Fix vertical alignment + simplify header in FinanceTransactionsView

**File:** [`frontend_app/src/views/FinanceTransactionsView.vue`](frontend_app/src/views/FinanceTransactionsView.vue)

Same as Task 3 — right-aligned back button to `/finance`, no title.

### Task 6: Build verification

```bash
docker compose exec sf_public_frontend npm run build 2>&1 | tail -5
```

Must show `✓ built in X.XXs` with no errors.

---

## 📋 Summary

| # | Fix | File(s) |
|---|-----|---------|
| 1 | Title in top navbar via FinanceLayout center slot | [`FinanceLayout.vue`](frontend_app/src/layouts/FinanceLayout.vue) |
| 2 | Bottom-aligned cards + simplified header | [`FinanceMainView.vue`](frontend_app/src/views/FinanceMainView.vue) |
| 3 | Bottom-aligned cards + simplified header | [`FinanceWalletsView.vue`](frontend_app/src/views/FinanceWalletsView.vue) |
| 4 | Bottom-aligned cards + simplified header | [`FinancePackagesView.vue`](frontend_app/src/views/FinancePackagesView.vue) |
| 5 | Bottom-aligned cards + simplified header | [`FinanceTransactionsView.vue`](frontend_app/src/views/FinanceTransactionsView.vue) |
| 6 | Build verification | `npm run build` |

## ⚠️ DO NOT MODIFY

- [`HeaderLogo.vue`](frontend_app/src/components/header/HeaderLogo.vue) — already correct
- [`BaseHeader.vue`](frontend_app/src/components/layout/BaseHeader.vue) — working
- [`FleetView.vue`](frontend_app/src/views/vehicles/FleetView.vue) — reference only
- [`PrivateLayout.vue`](frontend_app/src/layouts/PrivateLayout.vue) — working
- [`router/index.ts`](frontend_app/src/router/index.ts) — correct