Added vue frontend project, fixed swagger path

frontend/src/App.vue

@@ -1,7 +1,60 @@
 <script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
+import { ref } from 'vue';
+import Header from './components/Header.vue';
+import Navigation from './components/Navigation.vue';
+import BalanceWidget from './components/BalanceWidget.vue';
+import TodayWidget from './components/TodayWidget.vue';
+import RecentActivityWidget from './components/RecentActivityWidget.vue';
+import SwipeCards from './components/SwipeCards.vue';
+import FinanceScreen from './components/FinanceScreen.vue';
+import SettingsScreen from './components/SettingsScreen.vue';
+
+const activeScreen = ref('home');
+const previousScreen = ref('home');
+
+function handleNavigate(screen: string) {
+  if (screen === 'settings') {
+    if (activeScreen.value !== 'settings') {
+      previousScreen.value = activeScreen.value;
+    }
+    activeScreen.value = 'settings';
+    return;
+  }
+
+  if (screen === 'close-settings') {
+    activeScreen.value = previousScreen.value;
+    return;
+  }
+
+  activeScreen.value = screen;
+}
 </script>
 
 <template>
-  <HelloWorld />
+  <FinanceScreen
+    v-if="activeScreen === 'finance'"
+    @navigate="handleNavigate"
+  />
+
+  <SettingsScreen
+    v-else-if="activeScreen === 'settings'"
+    @navigate="handleNavigate"
+  />
+
+  <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" />
+
+      <main class="flex-1 overflow-y-auto px-5 pb-32">
+        <div class="space-y-4">
+          <BalanceWidget />
+          <TodayWidget />
+          <SwipeCards />
+          <RecentActivityWidget />
+        </div>
+      </main>
+
+      <Navigation :active-screen="activeScreen" @navigate="handleNavigate" />
+    </div>
+  </div>
 </template>