Added transaction feature, fixed some mistakes

frontend/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import Header from './components/Header.vue';
 import Navigation from './components/Navigation.vue';
 import BalanceWidget from './components/BalanceWidget.vue';
@@ -8,9 +8,16 @@ import RecentActivityWidget from './components/RecentActivityWidget.vue';
 import SwipeCards from './components/SwipeCards.vue';
 import FinanceScreen from './components/FinanceScreen.vue';
 import SettingsScreen from './components/SettingsScreen.vue';
+import { getFamilyById } from './api/families';
+import { useI18n } from './i18n';
 
 const activeScreen = ref('home');
 const previousScreen = ref('home');
+const familyName = ref<string | null>(null);
+const { t } = useI18n();
+
+const configuredFamilyId = Number.parseInt(import.meta.env.VITE_FAMILY_ID ?? '1', 10);
+const headerFamilyName = computed(() => familyName.value?.trim() || t('header.familyName'));
 
 function handleNavigate(screen: string) {
   if (screen === 'settings') {
@@ -28,6 +35,23 @@ function handleNavigate(screen: string) {
 
   activeScreen.value = screen;
 }
+
+async function loadFamily() {
+  if (!Number.isFinite(configuredFamilyId) || configuredFamilyId <= 0) {
+    return;
+  }
+
+  try {
+    const family = await getFamilyById(configuredFamilyId);
+    familyName.value = family.name;
+  } catch (error) {
+    console.error('Failed to load family', error);
+  }
+}
+
+onMounted(() => {
+  void loadFamily();
+});
 </script>
 
 <template>
@@ -43,7 +67,7 @@ function handleNavigate(screen: string) {
 
   <div v-else class="min-h-screen bg-[#0A0A0F] dark">
     <div class="mx-auto flex min-h-screen max-w-md flex-col relative">
-      <Header @navigate="handleNavigate" />
+      <Header :family-name="headerFamilyName" @navigate="handleNavigate" />
 
       <main class="flex-1 overflow-y-auto px-5 pb-32">
         <div class="space-y-4">