service-finder/plans/finance_navbar_and_alignment_fix_2026-07-26.md

🔵 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

Finding: The logo ALREADY navigates to /dashboard correctly (line 37). The targetRoute 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 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:

<template #center>
  <!-- Teleport target for child route page titles -->
</template>

Fix: Replace with:

<template #center>
  <span class="text-white font-bold text-sm tracking-wide">{{ financeTitle }}</span>
</template>

Add computed in script:

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

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

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

<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

1. Replace the #center slot (currently empty with just a comment):

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

   import { computed } from 'vue'
   

   Add to existing vue import line alongside useI18n.

3. Add useRoute import:

   import { useRoute } from 'vue-router'
   

   (Was removed in previous cleanup — add back)

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

   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

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

FROM:

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

TO:

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

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

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

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

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

Task 6: Build verification

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
2	Bottom-aligned cards + simplified header	FinanceMainView.vue
3	Bottom-aligned cards + simplified header	FinanceWalletsView.vue
4	Bottom-aligned cards + simplified header	FinancePackagesView.vue
5	Bottom-aligned cards + simplified header	FinanceTransactionsView.vue
6	Build verification	npm run build

⚠️ DO NOT MODIFY

• HeaderLogo.vue — already correct
• BaseHeader.vue — working
• FleetView.vue — reference only
• PrivateLayout.vue — working
• router/index.ts — correct