12 Сделать добавление транзакций на фронте, добавить уже сгенерированые экраны в проект

frontend/src/App.vue

@@ -1,23 +1,22 @@
 <script setup lang="ts">
 import { computed, onMounted, 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';
 import { getFamilyById } from './api/families';
-import { useI18n } from './i18n';
+import HomeScreen from "@/components/HomeScreen.vue";
+import CalendarScreen from "@/components/CalendarScreen.vue";
+import IntimacyScreen from "@/components/IntimacyScreen.vue";
+import {Heart} from "lucide-vue-next";
 
 const activeScreen = ref('home');
 const previousScreen = ref('home');
 const familyName = ref<string | null>(null);
-const { t } = useI18n();
+const familyOwnerId = ref<number | null>(null);
 
 const configuredFamilyId = Number.parseInt(import.meta.env.VITE_FAMILY_ID ?? '1', 10);
-const headerFamilyName = computed(() => familyName.value?.trim() || t('header.familyName'));
+const configuredUserId = Number.parseInt(import.meta.env.VITE_USER_ID ?? '', 10);
+
 
 function handleNavigate(screen: string) {
   if (screen === 'settings') {
@@ -44,6 +43,7 @@ async function loadFamily() {
   try {
     const family = await getFamilyById(configuredFamilyId);
     familyName.value = family.name;
+    familyOwnerId.value = family.owner_id;
   } catch (error) {
     console.error('Failed to load family', error);
   }
@@ -52,34 +52,71 @@ async function loadFamily() {
 onMounted(() => {
   void loadFamily();
 });
+
+const resolvedUserId = computed(() => {
+  if (Number.isFinite(configuredUserId) && configuredUserId > 0) {
+    return configuredUserId;
+  }
+
+  return familyOwnerId.value;
+});
 </script>
 
 <template>
+  <!-- Home Screen -->
+  <HomeScreen
+      v-if="activeScreen === 'home'"
+      :family-id="Number.isFinite(configuredFamilyId) && configuredFamilyId > 0 ? configuredFamilyId : undefined"
+      :on-navigate="handleNavigate"
+      @navigate="handleNavigate"
+  />
+
+  <!-- Finance Screen -->
   <FinanceScreen
-    v-if="activeScreen === 'finance'"
+    v-else-if="activeScreen === 'finance'"
     :family-id="Number.isFinite(configuredFamilyId) && configuredFamilyId > 0 ? configuredFamilyId : undefined"
+    :user-id="resolvedUserId ?? undefined"
+    :on-navigate="handleNavigate"
     @navigate="handleNavigate"
   />
 
+  <!-- Settings Screen -->
   <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 :family-name="headerFamilyName" @navigate="handleNavigate" />
+  <!-- Calendar Screen -->
+  <CalendarScreen
+      v-else-if="activeScreen === 'calendar'"
+      :family-id="Number.isFinite(configuredFamilyId) && configuredFamilyId > 0 ? configuredFamilyId : undefined"
+      @navigate="handleNavigate"
+  />
 
-      <main class="flex-1 overflow-y-auto px-5 pb-32">
-        <div class="space-y-4">
-          <BalanceWidget />
-          <TodayWidget />
-          <SwipeCards />
-          <RecentActivityWidget />
-        </div>
-      </main>
+  <!-- Intimacy Screen -->
+  <IntimacyScreen
+      v-else-if="activeScreen === 'intimacy'"
+      :family-id="Number.isFinite(configuredFamilyId) && configuredFamilyId > 0 ? configuredFamilyId : undefined"
+      @navigate="handleNavigate"
+  />
 
-      <Navigation :active-screen="activeScreen" @navigate="handleNavigate" />
+  <!-- Fallback for other screens -->
+  <div v-else class="min-h-screen bg-[#0A0A0F] dark flex items-center justify-center">
+    <div class="text-center px-8">
+      <div class="w-16 h-16 rounded-full bg-gradient-to-br from-purple-500 to-blue-600 flex items-center justify-center mx-auto mb-4">
+        <Heart :size="32" :stroke-width="2" class="text-white" />
+      </div>
+      <h2 class="text-white text-[20px] font-bold mb-2">{{ activeScreen.charAt(0).toUpperCase() + activeScreen.slice(1) }}</h2>
+      <p class="text-zinc-400 text-[14px] mb-6">
+        This screen is coming soon!
+      </p>
+      <button
+          @click="handleNavigate('home')"
+          class="px-6 py-3 rounded-[14px] bg-gradient-to-br from-purple-500 to-blue-600 text-white text-[14px] font-semibold hover:shadow-lg hover:shadow-purple-500/30 transition-all"
+      >
+        Go to Home
+      </button>
     </div>
+    <Navigation :active-screen="activeScreen" @navigate="handleNavigate" />
   </div>
 </template>