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

frontend/src/api/families.ts

@@ -0,0 +1,19 @@
+export interface Family {
+  id: number
+  name: string
+  owner_id: number
+  telegram_chat_id: number | null
+  telegram_chat_name: string | null
+  created_at: string
+  updated_at: string
+}
+
+export async function getFamilyById(id: number): Promise<Family> {
+  const response = await fetch(`/api/v1/families/${id}`)
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch family: ${response.status}`)
+  }
+
+  return response.json() as Promise<Family>
+}

frontend/src/components/Header.vue

@@ -6,6 +6,13 @@ import { useI18n } from '@/i18n';
 const emit = defineEmits<{
   navigate: [screen: string];
 }>();
+
+const props = withDefaults(defineProps<{
+  familyName?: string;
+}>(), {
+  familyName: '',
+});
+
 const { t } = useI18n();
 
 const currentHour = ref(new Date().getHours());
@@ -51,7 +58,7 @@ onBeforeUnmount(() => {
       </div>
       <div>
         <p class="mb-0.5 text-[11px] font-normal text-zinc-500">{{ greeting }}</p>
-        <h1 class="text-[17px] font-semibold tracking-tight text-white">{{ t('header.familyName') }}</h1>
+        <h1 class="text-[17px] font-semibold tracking-tight text-white">{{ props.familyName || t('header.familyName') }}</h1>
       </div>
     </div>
     <div class="flex items-center gap-2">

frontend/src/vite-env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_FAMILY_ID?: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

frontend/vite.config.ts

@@ -11,6 +11,14 @@ export default defineConfig({
     vue(),
     tailwindcss(),
   ],
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+    },
+  },
   resolve: {
     alias: {
       // Alias @ to the src directory