Production deployment setup + feature complete

- Dockerfile + deploy.sh for Hetzner server
- Email verification via Better Auth + Resend
- Invite code flow (6-digit OTP, generate/join)
- Settlement share percent fix (payer vs debtor)
- OCR scanner fixes (date display, retry, viewfinder)
- app.json icon/splash/adaptive-icon configured
- iOS deployment target 15.5 (ML Kit requirement)
- DB migration 0014: household_invitations table

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/native/app/(app)/_layout.tsx

@@ -0,0 +1,121 @@
+import { Ionicons } from "@expo/vector-icons";
+import { useSession, authClient } from "@/src/lib/auth-client";
+import { useAuthStore } from "@/src/stores/auth.store";
+import { TAB_COLORS } from "@/src/constants/colors";
+import { apiRequest } from "@/src/lib/api-client";
+import { Redirect, Tabs, useRouter } from "expo-router";
+import React, { useEffect } from "react";
+import { Alert } from "react-native";
+import { queryClient } from "@/src/lib/query-client";
+import { useTranslation } from "react-i18next";
+
+function PendingInvitationHandler() {
+  const router = useRouter();
+  const pendingInvitationId = useAuthStore((s) => s.pendingInvitationId);
+
+  useEffect(() => {
+    if (!pendingInvitationId) return;
+
+    authClient.organization.acceptInvitation({ invitationId: pendingInvitationId })
+      .then(async (result) => {
+        useAuthStore.getState().setPendingInvitationId(null);
+        if (result.error) {
+          Alert.alert("Fehler", result.error.message ?? "Einladung konnte nicht angenommen werden.");
+          return;
+        }
+        const householdsResponse = await apiRequest<{ households: { id: string; name: string; role: string }[] }>("/api/households");
+        const newHouseholds = householdsResponse.households;
+        useAuthStore.getState().setHouseholds(newHouseholds);
+        if (newHouseholds[0] && !useAuthStore.getState().activeHouseholdId) {
+          useAuthStore.getState().setActiveHousehold(newHouseholds[0].id);
+        }
+        await queryClient.invalidateQueries();
+        Alert.alert("Einladung angenommen", "Du bist jetzt Mitglied des Haushalts.");
+        router.replace("/(app)/haushalt");
+      })
+      .catch((err: Error) => {
+        useAuthStore.getState().setPendingInvitationId(null);
+        Alert.alert("Fehler", err.message ?? "Einladung konnte nicht angenommen werden.");
+      });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pendingInvitationId]);
+
+  return null;
+}
+
+export default function AppLayout() {
+  const { data: session, isPending } = useSession();
+  const households = useAuthStore((s) => s.households);
+  const { t } = useTranslation();
+
+  if (isPending) return null;
+  if (!session) return <Redirect href="/(auth)/login" />;
+  if (households.length === 0) return <Redirect href="/(auth)/onboarding" />;
+
+  return (
+    <>
+      <PendingInvitationHandler />
+      <Tabs
+        screenOptions={{
+          tabBarInactiveTintColor: "#9ca3af",
+          headerShown: false,
+          tabBarStyle: { borderTopColor: "#f3f4f6" },
+        }}
+      >
+        <Tabs.Screen
+          name="haushalt/index"
+          options={{
+            title: t('tabs.household'),
+            tabBarActiveTintColor: TAB_COLORS.household,
+            tabBarIcon: ({ color, size }) => <Ionicons name="home-outline" size={size} color={color} />,
+          }}
+        />
+        <Tabs.Screen
+          name="ich/index"
+          options={{
+            title: t('tabs.me'),
+            tabBarActiveTintColor: TAB_COLORS.private,
+            tabBarIcon: ({ color, size }) => <Ionicons name="person-outline" size={size} color={color} />,
+          }}
+        />
+        <Tabs.Screen
+          name="kinder/index"
+          options={{
+            title: t('tabs.children'),
+            tabBarActiveTintColor: TAB_COLORS.children,
+            tabBarIcon: ({ color, size }) => <Ionicons name="happy-outline" size={size} color={color} />,
+          }}
+        />
+        <Tabs.Screen
+          name="shopping-list/index"
+          options={{
+            title: t('tabs.shopping'),
+            tabBarActiveTintColor: TAB_COLORS.shopping,
+            tabBarIcon: ({ color, size }) => <Ionicons name="cart-outline" size={size} color={color} />,
+          }}
+        />
+        <Tabs.Screen
+          name="mehr/index"
+          options={{
+            title: t('tabs.more'),
+            tabBarActiveTintColor: TAB_COLORS.more,
+            tabBarIcon: ({ color, size }) => <Ionicons name="grid-outline" size={size} color={color} />,
+          }}
+        />
+
+        {/* Hidden — not in tab bar */}
+        <Tabs.Screen name="dashboard/index" options={{ href: null }} />
+        <Tabs.Screen name="transactions/index" options={{ href: null }} />
+        <Tabs.Screen name="urlaub/index" options={{ href: null }} />
+        <Tabs.Screen name="urlaub/[id]" options={{ href: null }} />
+        <Tabs.Screen name="settings/index" options={{ href: null }} />
+        <Tabs.Screen name="settings/categories" options={{ href: null }} />
+        <Tabs.Screen name="settings/fixed-costs" options={{ href: null }} />
+        <Tabs.Screen name="settings/transfer-line-items" options={{ href: null }} />
+        <Tabs.Screen name="settings/household" options={{ href: null }} />
+        <Tabs.Screen name="months/close" options={{ href: null }} />
+        <Tabs.Screen name="scanner" options={{ href: null }} />
+      </Tabs>
+    </>
+  );
+}

apps/native/app/(app)/dashboard/index.tsx

@@ -0,0 +1,10 @@
+import { PlaceholderScreen } from "@/src/components/features/PlaceholderScreen";
+
+export default function DashboardScreen() {
+  return (
+    <PlaceholderScreen
+      title="Dashboard"
+      description="Your financial overview will appear here"
+    />
+  );
+}

apps/native/app/(app)/haushalt/index.tsx

@@ -0,0 +1,647 @@
+import { QuickAddModal } from "@/src/components/features/transactions/QuickAddModal";
+import { TransactionItem } from "@/src/components/features/transactions/TransactionItem";
+import { EditTransactionModal } from "@/src/components/features/transactions/EditTransactionModal";
+import { CarryOverBanner } from "@/src/components/features/transactions/CarryOverBanner";
+import { MonthSummaryHeader } from "@/src/components/features/transactions/MonthSummaryHeader";
+import { AddCategoryModal } from "@/src/components/features/categories/AddCategoryModal";
+import { ModalHeader } from "@/src/components/ui/ModalHeader";
+import { EmptyState } from "@/src/components/ui/EmptyState";
+import { Numpad } from "@/src/components/ui/Numpad";
+import { useTransactions, useActivateFixed, useMonthBalance, useDeleteTransaction } from "@/src/hooks/useTransactions";
+import type { TransactionWithCategory } from "@/src/hooks/useTransactions";
+import { useAuthStore } from "@/src/stores/auth.store";
+import { useSettlementV2, useCreateMonthlyTransfer, useNettoMonth, type MonthlyTransfer } from "@/src/hooks/useFixedCosts";
+import { useHouseholdSettings } from "@/src/hooks/useHouseholdSettings";
+import { useMonthStatus } from "@/src/hooks/useMonthStatus";
+import { currentMonthStr, addMonths, monthLabel, monthDateRange } from "@/src/utils/date";
+import { formatEur } from "@/src/utils/format";
+import { handleNumpadKey, parseAmountStr } from "@/src/utils/numpad";
+import { useRouter } from "expo-router";
+import { Ionicons } from "@expo/vector-icons";
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import type { Category } from "@/src/hooks/useCategories";
+import {
+  ActivityIndicator,
+  Alert,
+  FlatList,
+  Modal,
+  Pressable,
+  RefreshControl,
+  Text,
+  TextInput,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import { TAB_COLORS } from "@/src/constants/colors";
+
+const ACCENT = TAB_COLORS.household;
+
+// ── Record Transfer Modal ─────────────────────────────────────────────────────
+
+function RecordTransferModal({
+  month,
+  toUserId,
+  onClose,
+}: {
+  month: string;
+  toUserId: string;
+  onClose: () => void;
+}) {
+  const [amountStr, setAmountStr] = useState("0");
+  const [note, setNote] = useState("");
+  const { t } = useTranslation();
+  const { mutate: createTransfer, isPending } = useCreateMonthlyTransfer();
+
+  function handleNumpad(key: string) {
+    setAmountStr((prev) => handleNumpadKey(prev, key));
+  }
+
+  function handleSave() {
+    const amount = parseAmountStr(amountStr);
+    if (!amount || amount <= 0) return;
+    createTransfer(
+      { month, toUserId, amount, note: note.trim() || undefined },
+      { onSuccess: onClose },
+    );
+  }
+
+  const canSave = parseAmountStr(amountStr) > 0;
+
+  return (
+    <Modal visible animationType="slide" presentationStyle="pageSheet" onRequestClose={onClose}>
+      <View className="flex-1 bg-white">
+        <ModalHeader
+          title={t('household.settlement.recordTransfer')}
+          onClose={onClose}
+          closeLabel={t('common.cancel')}
+          onSave={handleSave}
+          saveLabel={t('household.settlement.book')}
+          saveDisabled={!canSave}
+          saveLoading={isPending}
+          saveColor={ACCENT}
+        />
+        <View className="items-center py-6">
+          <Text className="text-5xl font-bold text-gray-900">€ {amountStr}</Text>
+          <Text className="text-sm text-gray-400 mt-1">{t('household.settlement.transferAmount')}</Text>
+        </View>
+        <View className="px-4 mb-4">
+          <TextInput
+            className="bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-base text-gray-900"
+            placeholder={t('household.settlement.notePlaceholder')}
+            value={note}
+            onChangeText={setNote}
+          />
+        </View>
+        <Numpad onKeyPress={handleNumpad} />
+      </View>
+    </Modal>
+  );
+}
+
+// ── Settlement Banner V2 ──────────────────────────────────────────────────────
+
+function SettlementBanner({ month, isCurrent }: { month: string; isCurrent: boolean }) {
+  const userId = useAuthStore((s) => s.user?.id);
+  const router = useRouter();
+  const { t } = useTranslation();
+  const { data: settlement, isLoading } = useSettlementV2(month);
+  const { data: hhSettings } = useHouseholdSettings();
+  const { data: monthStatus } = useMonthStatus(month);
+  const [expanded, setExpanded] = useState(false);
+  const [showTransferModal, setShowTransferModal] = useState(false);
+  const isClosed = monthStatus?.status === "closed";
+
+  if (isLoading) {
+    return (
+      <View className="mx-4 mt-4 mb-1 rounded-2xl bg-gray-100 p-4 items-center">
+        <ActivityIndicator size="small" color="#9ca3af" />
+      </View>
+    );
+  }
+
+  if (!settlement || settlement.memberCount <= 1) return null;
+
+  // Closed month — show lock banner
+  if (isClosed && monthStatus) {
+    const closedDate = monthStatus.closedAt
+      ? new Date(monthStatus.closedAt).toLocaleDateString("de-DE", { day: "numeric", month: "long", year: "numeric" })
+      : "";
+    return (
+      <View
+        className="mx-4 mt-4 mb-1 rounded-2xl px-4 py-3 flex-row items-center gap-3"
+        style={{ backgroundColor: "#f0fdf4", borderWidth: 1, borderColor: "#bbf7d0" }}
+      >
+        <Ionicons name="lock-closed" size={18} color="#16a34a" />
+        <View className="flex-1">
+          <Text className="text-xs text-gray-400">{t('household.settlement.closed')}</Text>
+          <Text className="text-sm font-semibold text-green-700">
+            ✓ {closedDate}
+            {monthStatus.finalAmount != null && monthStatus.finalAmount > 0
+              ? ` · ${formatEur(monthStatus.finalAmount)}`
+              : ""}
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
+  const remaining = settlement.remaining;
+  const isOwing = remaining > 0.005;
+  const isReceiving = remaining < -0.005;
+  const isEven = !isOwing && !isReceiving;
+
+  const bannerBg = isOwing ? "#fff7ed" : isReceiving ? "#f0fdf4" : "#f9fafb";
+  const bannerBorder = isOwing ? "#fed7aa" : isReceiving ? "#bbf7d0" : "#e5e7eb";
+  const amountColor = isOwing ? "#ea580c" : isReceiving ? "#16a34a" : "#6b7280";
+
+  const others = settlement.members.filter((m) => m.userId !== userId);
+  const otherName = hhSettings?.partnerName ?? others[0]?.name ?? "den anderen";
+  const otherUserId = others[0]?.userId ?? "";
+
+  let mainText = t('household.settlement.allSettled');
+  if (isOwing) mainText = t('household.settlement.youOwe', { name: otherName });
+  else if (isReceiving) mainText = t('household.settlement.theyOwe', { name: otherName });
+
+  return (
+    <>
+      <View
+        style={{ backgroundColor: bannerBg, borderColor: bannerBorder, borderWidth: 1 }}
+        className="mx-4 mt-4 mb-1 rounded-2xl overflow-hidden"
+      >
+        {/* Summary row */}
+        <Pressable
+          onPress={() => setExpanded((v) => !v)}
+          className="flex-row items-center px-4 py-3 active:opacity-80"
+        >
+          <View className="flex-1">
+            <Text className="text-xs text-gray-400 mb-0.5">{t('household.settlement.monthlySettlement')}</Text>
+            <Text className="text-sm font-medium" style={{ color: amountColor }}>{mainText}</Text>
+            {!isEven && (
+              <Text className="text-3xl font-bold" style={{ color: amountColor }}>
+                {formatEur(Math.abs(remaining))}
+              </Text>
+            )}
+            {isEven && (
+              <Text className="text-base font-bold text-green-600">{t('household.settlement.allSettled')}</Text>
+            )}
+          </View>
+          <Ionicons name={expanded ? "chevron-up" : "chevron-down"} size={14} color="#9ca3af" />
+        </Pressable>
+
+        {/* Expandable detail */}
+        {expanded && (
+          <View style={{ backgroundColor: "rgba(0,0,0,0.03)" }} className="px-4 pb-4">
+            {/* Haushalt breakdown */}
+            <View className="py-2 gap-1.5">
+              <View className="flex-row justify-between">
+                <Text className="text-xs text-gray-500">{t('household.settlement.householdExpenses')}</Text>
+                <Text className="text-xs font-medium text-gray-700">{formatEur(settlement.householdExpenses)}</Text>
+              </View>
+              {settlement.householdIncome > 0 && (
+                <View className="flex-row justify-between">
+                  <Text className="text-xs text-gray-500">{t('household.settlement.householdIncome')}</Text>
+                  <Text className="text-xs font-medium text-green-600">−{formatEur(settlement.householdIncome)}</Text>
+                </View>
+              )}
+              <View className="flex-row justify-between">
+                <Text className="text-xs font-semibold text-gray-600">{t('household.settlement.yourShare', { percent: settlement.userSharePercent ?? 50 })}</Text>
+                <Text className="text-xs font-semibold text-gray-800">{formatEur(settlement.perMemberShare)}</Text>
+              </View>
+            </View>
+
+            {/* Who paid what */}
+            <View className="h-px bg-gray-200 my-2" />
+            <View className="gap-1.5">
+              {settlement.members.map((mem) => {
+                const isMe = mem.userId === userId;
+                const name = isMe ? "Du" : otherName;
+                const paidAmount = isMe ? settlement.myOwnExpenses : (settlement.householdExpenses - settlement.myOwnExpenses);
+                if (paidAmount < 0.01) return null;
+                return (
+                  <View key={mem.userId} className="flex-row justify-between">
+                    <Text className="text-xs text-gray-500">{t('household.settlement.paidBy', { name })}</Text>
+                    <Text className="text-xs font-medium text-gray-700">{formatEur(paidAmount)}</Text>
+                  </View>
+                );
+              })}
+            </View>
+
+            {/* Fixed transfer items — summarised */}
+            {settlement.lineItemsTotal > 0 && (
+              <>
+                <View className="h-px bg-gray-200 my-2" />
+                <View className="flex-row justify-between">
+                  <Text className="text-xs text-gray-500">+ {t('household.settlement.fixedTransfers')}</Text>
+                  <Text className="text-xs font-medium text-gray-700">{formatEur(settlement.lineItemsTotal)}</Text>
+                </View>
+              </>
+            )}
+
+            {/* Total owed */}
+            <View className="h-px bg-gray-200 my-2" />
+            <View className="flex-row justify-between mb-3">
+              <Text className="text-xs font-bold text-gray-700">{t('household.settlement.toTransfer')}</Text>
+              <Text className="text-xs font-bold" style={{ color: amountColor }}>{formatEur(settlement.totalOwed)}</Text>
+            </View>
+
+            {/* Already transferred */}
+            <View className="flex-row items-center justify-between">
+              <View>
+                <Text className="text-xs text-gray-400">{t('household.settlement.alreadyTransferred')}</Text>
+                <Text className="text-sm font-semibold text-gray-700">{formatEur(settlement.alreadyTransferred)}</Text>
+              </View>
+              {isOwing && (
+                <Pressable
+                  onPress={() => setShowTransferModal(true)}
+                  style={{ backgroundColor: ACCENT }}
+                  className="px-4 py-2 rounded-xl active:opacity-80"
+                >
+                  <Text className="text-xs font-semibold text-white">+ {t('household.settlement.book')}</Text>
+                </Pressable>
+              )}
+            </View>
+
+            {/* Close month button */}
+            {isCurrent && (
+              <Pressable
+                onPress={() => router.push({ pathname: "/(app)/months/close", params: { month } })}
+                className="mt-3 flex-row items-center justify-center gap-2 py-2.5 rounded-xl active:opacity-80"
+                style={{ backgroundColor: "#f3f4f6", borderWidth: 1, borderColor: "#e5e7eb" }}
+              >
+                <Ionicons name="lock-closed-outline" size={14} color="#6b7280" />
+                <Text className="text-xs font-semibold text-gray-600">{t('household.settlement.closeMonth')}</Text>
+              </Pressable>
+            )}
+
+            {/* Transfer history */}
+            {settlement.transfers.length > 0 && (
+              <View className="mt-3 gap-1">
+                {settlement.transfers.map((t: MonthlyTransfer) => (
+                  <View key={t.id} className="flex-row justify-between">
+                    <Text className="text-xs text-gray-400">
+                      {new Date(t.createdAt).toLocaleDateString("de-DE", { day: "numeric", month: "short" })}
+                      {t.note ? ` · ${t.note}` : ""}
+                    </Text>
+                    <Text className="text-xs font-medium text-gray-600">{formatEur(t.amount)}</Text>
+                  </View>
+                ))}
+              </View>
+            )}
+          </View>
+        )}
+      </View>
+
+      {showTransferModal && (
+        <RecordTransferModal
+          month={month}
+          toUserId={otherUserId}
+          onClose={() => setShowTransferModal(false)}
+        />
+      )}
+    </>
+  );
+}
+
+// ── Netto Card ────────────────────────────────────────────────────────────────
+
+function NettoCard({ month }: { month: string }) {
+  const { data, isLoading } = useNettoMonth(month);
+  const { t } = useTranslation();
+  const [expanded, setExpanded] = useState(false);
+
+  if (isLoading) {
+    return (
+      <View className="mx-4 mt-2 mb-1 rounded-2xl bg-white p-4 items-center" style={{ borderWidth: 1, borderColor: "#f3f4f6" }}>
+        <ActivityIndicator size="small" color="#9ca3af" />
+      </View>
+    );
+  }
+
+  if (!data) return null;
+
+  const isPositive = data.netto >= 0;
+  const nettoColor = isPositive ? "#16a34a" : "#dc2626";
+  const nettoIcon = isPositive ? "trending-up" : "trending-down";
+
+  return (
+    <View
+      className="mx-4 mt-2 mb-1 rounded-2xl bg-white overflow-hidden"
+      style={{ borderWidth: 1, borderColor: "#f3f4f6" }}
+    >
+      <Pressable
+        onPress={() => setExpanded((v) => !v)}
+        className="flex-row items-center px-4 py-3 active:opacity-80"
+      >
+        <View
+          className="w-9 h-9 rounded-xl items-center justify-center mr-3"
+          style={{ backgroundColor: isPositive ? "#dcfce7" : "#fee2e2" }}
+        >
+          <Ionicons name={nettoIcon as React.ComponentProps<typeof Ionicons>["name"]} size={18} color={nettoColor} />
+        </View>
+        <View className="flex-1">
+          <Text className="text-xs text-gray-400">{t('household.nettoMonth')}</Text>
+          <Text className="text-xl font-bold" style={{ color: nettoColor }}>
+            {isPositive ? "+" : "−"}{formatEur(Math.abs(data.netto))}
+          </Text>
+        </View>
+        <View className="items-end mr-2">
+          <Text className="text-xs text-gray-400">{t('household.income')}</Text>
+          <Text className="text-sm font-semibold text-green-600">+{formatEur(data.totalIncome)}</Text>
+        </View>
+        <Ionicons name={expanded ? "chevron-up" : "chevron-down"} size={14} color="#9ca3af" />
+      </Pressable>
+
+      {expanded && (
+        <View className="px-4 pb-4" style={{ backgroundColor: "rgba(0,0,0,0.02)" }}>
+          {/* Income breakdown */}
+          {data.incomeByScope.length > 0 ? (
+            <>
+              <Text className="text-xs font-medium text-gray-400 mb-2">Einnahmen nach Bereich</Text>
+              {data.incomeByScope.map((s) => (
+                <View key={s.scope} className="flex-row justify-between mb-1">
+                  <Text className="text-xs text-gray-500">{s.label}</Text>
+                  <Text className="text-xs font-medium text-green-600">+{formatEur(s.amount)}</Text>
+                </View>
+              ))}
+              <View className="h-px bg-gray-100 my-2" />
+            </>
+          ) : (
+            <Text className="text-xs text-gray-400 mb-2">Keine Einnahmen gebucht</Text>
+          )}
+
+          {/* Expenses */}
+          <View className="flex-row justify-between mb-1">
+            <Text className="text-xs text-gray-500">Ausgaben (alle Bereiche)</Text>
+            <Text className="text-xs font-medium text-red-500">−{formatEur(data.totalExpenses)}</Text>
+          </View>
+
+          <View className="h-px bg-gray-100 my-2" />
+          <View className="flex-row justify-between">
+            <Text className="text-xs font-bold text-gray-700">Netto</Text>
+            <Text className="text-xs font-bold" style={{ color: nettoColor }}>
+              {isPositive ? "+" : "−"}{formatEur(Math.abs(data.netto))}
+            </Text>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}
+
+// ── Month Switcher ─────────────────────────────────────────────────────────────
+
+function MonthSwitcher({
+  month,
+  isLocked,
+  onPrev,
+  onNext,
+}: {
+  month: string;
+  isLocked: boolean;
+  onPrev: () => void;
+  onNext: () => void;
+}) {
+  const isCurrent = month === currentMonthStr();
+  return (
+    <View className="flex-row items-center justify-center gap-4 py-3">
+      <Pressable onPress={onPrev} className="p-1 active:opacity-50">
+        <Ionicons name="chevron-back" size={18} color="#6b7280" />
+      </Pressable>
+      <View className="flex-row items-center gap-1.5 w-32 justify-center">
+        {isLocked && <Ionicons name="lock-closed" size={12} color="#9ca3af" />}
+        <Text className="text-sm font-semibold text-gray-800 text-center">
+          {monthLabel(month)}
+        </Text>
+      </View>
+      <Pressable
+        onPress={onNext}
+        disabled={isCurrent}
+        className="p-1 active:opacity-50"
+        style={{ opacity: isCurrent ? 0.3 : 1 }}
+      >
+        <Ionicons name="chevron-forward" size={18} color="#6b7280" />
+      </Pressable>
+    </View>
+  );
+}
+
+// ── Main Screen ───────────────────────────────────────────────────────────────
+
+type FilterType = "all" | "income" | "expense";
+
+export default function HaushaltScreen() {
+  const insets = useSafeAreaInsets();
+  const { t } = useTranslation();
+  const router = useRouter();
+  const [month, setMonth] = useState(currentMonthStr());
+  const [filter, setFilter] = useState<FilterType>("all");
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [showFabMenu, setShowFabMenu] = useState(false);
+  const [showAddCategory, setShowAddCategory] = useState(false);
+  const [addCategoryType, setAddCategoryType] = useState<"expense" | "income">("expense");
+  const [newCategory, setNewCategory] = useState<Category | null>(null);
+  const [editTransaction, setEditTransaction] = useState<TransactionWithCategory | null>(null);
+  const { mutate: deleteTransaction } = useDeleteTransaction();
+  const { data: monthStatus } = useMonthStatus(month);
+  const isLocked = monthStatus?.status === "closed";
+
+  const isCurrent = month === currentMonthStr();
+  const { mutate: activateFixed } = useActivateFixed();
+  useEffect(() => {
+    if (isCurrent) {
+      activateFixed({ month, scope: "household" });
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [month]);
+
+  const [fromDate, toDate] = monthDateRange(month);
+
+  const txFilter = {
+    scope: "household" as const,
+    from: fromDate,
+    to: toDate,
+    ...(filter !== "all" ? { type: filter as "income" | "expense" } : {}),
+  };
+
+  const { data: transactions = [], isLoading, refetch, isRefetching } = useTransactions(txFilter);
+  const { data: balance, isLoading: balanceLoading } = useMonthBalance("household", month);
+
+  function renderEmpty() {
+    if (isLoading) return null;
+    return (
+      <EmptyState
+        icon="wallet-outline"
+        title={t('household.noTransactions')}
+        subtitle={t('household.noTransactionsHint')}
+      />
+    );
+  }
+
+  return (
+    <View className="flex-1 bg-gray-50">
+      {/* Header */}
+      <View style={{ backgroundColor: "#fff", paddingTop: insets.top, borderBottomWidth: 1, borderBottomColor: "#f3f4f6" }}>
+        <MonthSwitcher
+          month={month}
+          isLocked={isLocked}
+          onPrev={() => setMonth((m) => addMonths(m, -1))}
+          onNext={() => setMonth((m) => addMonths(m, 1))}
+        />
+      </View>
+
+      <FlatList
+        data={transactions}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => (
+          <View className="bg-white">
+            <TransactionItem
+              transaction={item}
+              onPress={isLocked ? () => {} : setEditTransaction}
+              onDelete={isLocked ? () => {} : (t) => deleteTransaction(t.id)}
+              locked={isLocked}
+            />
+          </View>
+        )}
+        ListHeaderComponent={
+          <View className="bg-gray-50">
+            <SettlementBanner month={month} isCurrent={isCurrent} />
+            <NettoCard month={month} />
+
+            <MonthSummaryHeader
+              income={balance?.income}
+              expense={balance?.expense}
+              balance={balance?.balance}
+              isLoading={balanceLoading}
+              accentColor={ACCENT}
+            />
+
+            <CarryOverBanner month={month} scope="household" />
+
+            {/* Filter Bar */}
+            <View className="flex-row px-4 py-3 gap-2 bg-white border-b border-gray-100 mt-3">
+              {(["all", "expense", "income"] as const).map((f) => (
+                <Pressable
+                  key={f}
+                  onPress={() => setFilter(f)}
+                  style={{ backgroundColor: filter === f ? ACCENT : "#f3f4f6" }}
+                  className="px-4 py-1.5 rounded-full"
+                >
+                  <Text
+                    className="text-sm font-medium"
+                    style={{ color: filter === f ? "#fff" : "#4b5563" }}
+                  >
+                    {f === "all" ? t('household.all') : f === "expense" ? t('household.expenses') : t('household.income')}
+                  </Text>
+                </Pressable>
+              ))}
+            </View>
+          </View>
+        }
+        ListEmptyComponent={renderEmpty}
+        refreshControl={
+          <RefreshControl
+            refreshing={isRefetching}
+            onRefresh={() => void refetch()}
+            tintColor={ACCENT}
+          />
+        }
+        ItemSeparatorComponent={() => <View className="h-px bg-gray-50 ml-16" />}
+        contentContainerStyle={transactions.length === 0 ? { flex: 1 } : undefined}
+      />
+
+      {isLoading && (
+        <View className="absolute inset-0 items-center justify-center">
+          <ActivityIndicator size="large" color={ACCENT} />
+        </View>
+      )}
+
+      {/* FAB — hidden for locked months */}
+      {!isLocked && (
+        <>
+          {/* Backdrop */}
+          {showFabMenu && (
+            <Pressable
+              className="absolute inset-0"
+              style={{ backgroundColor: "rgba(0,0,0,0.25)" }}
+              onPress={() => setShowFabMenu(false)}
+            />
+          )}
+
+          {/* FAB menu — anchored above FAB, zIndex above backdrop */}
+          {showFabMenu && (
+            <View
+              className="absolute right-6 bg-white rounded-2xl overflow-hidden"
+              style={{
+                bottom: insets.bottom + 80,
+                minWidth: 200,
+                shadowColor: "#000",
+                shadowOpacity: 0.18,
+                shadowRadius: 16,
+                shadowOffset: { width: 0, height: 6 },
+                elevation: 12,
+                zIndex: 100,
+              }}
+            >
+              <Pressable
+                onPress={() => {
+                  setShowFabMenu(false);
+                  setShowAddModal(true);
+                }}
+                className="flex-row items-center gap-3 px-5 py-4 active:bg-gray-50"
+              >
+                <Ionicons name="pencil-outline" size={20} color={ACCENT} />
+                <Text className="text-sm font-medium text-gray-800">
+                  {t("scanner.manualEntry")}
+                </Text>
+              </Pressable>
+              <View className="h-px bg-gray-100" />
+              <Pressable
+                onPress={() => {
+                  setShowFabMenu(false);
+                  router.push("/(app)/scanner");
+                }}
+                className="flex-row items-center gap-3 px-5 py-4 active:bg-gray-50"
+              >
+                <Ionicons name="camera-outline" size={20} color={ACCENT} />
+                <Text className="text-sm font-medium text-gray-800">
+                  {t("scanner.scanReceipt")}
+                </Text>
+              </Pressable>
+            </View>
+          )}
+
+          {/* FAB button */}
+          <Pressable
+            onPress={() => setShowFabMenu((v) => !v)}
+            style={{ backgroundColor: ACCENT, bottom: insets.bottom + 20, zIndex: 101 }}
+            className="absolute right-6 w-14 h-14 rounded-full items-center justify-center shadow-lg active:opacity-80"
+          >
+            <Ionicons name={showFabMenu ? "close" : "add"} size={28} color="#fff" />
+          </Pressable>
+        </>
+      )}
+
+      <QuickAddModal
+        visible={showAddModal}
+        onClose={() => { setShowAddModal(false); setNewCategory(null); }}
+        onRequestAddCategory={(t) => { setAddCategoryType(t); setShowAddModal(false); setShowAddCategory(true); }}
+        newCategory={newCategory}
+        defaultScope="household"
+      />
+      <AddCategoryModal
+        visible={showAddCategory}
+        onClose={() => { setShowAddCategory(false); setShowAddModal(true); }}
+        defaultType={addCategoryType}
+        onCreated={(cat) => { setNewCategory(cat); setShowAddCategory(false); setShowAddModal(true); }}
+      />
+      {editTransaction && (
+        <EditTransactionModal
+          transaction={editTransaction}
+          onClose={() => setEditTransaction(null)}
+        />
+      )}
+    </View>
+  );
+}

apps/native/app/(app)/ich/index.tsx

@@ -0,0 +1,23 @@
+import { TransactionScreen } from "@/src/components/features/transactions/TransactionScreen";
+import { DebtsSection } from "@/src/components/features/debts/DebtsSection";
+import { ClaimsSection } from "@/src/components/features/debts/ClaimsSection";
+import { View } from "react-native";
+import { useTranslation } from "react-i18next";
+
+export default function IchScreen() {
+  const { t } = useTranslation();
+  return (
+    <TransactionScreen
+      scope="private"
+      accentColor="#7c3aed"
+      emptyTitle={t('me.noTransactions')}
+      emptySubtitle={t('me.noTransactionsHint')}
+      headerExtra={
+        <View>
+          <DebtsSection />
+          <ClaimsSection />
+        </View>
+      }
+    />
+  );
+}

apps/native/app/(app)/kinder/index.tsx

@@ -0,0 +1,234 @@
+import { Ionicons } from "@expo/vector-icons";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ActivityIndicator,
+  Modal,
+  Pressable,
+  ScrollView,
+  Text,
+  TextInput,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { TransactionScreen } from "@/src/components/features/transactions/TransactionScreen";
+import { useChildren, useCreateChild, type Child } from "@/src/hooks/useChildren";
+import { ModalHeader } from "@/src/components/ui/ModalHeader";
+
+const CHILD_COLORS = [
+  "#ec4899",
+  "#f59e0b",
+  "#10b981",
+  "#2563EB",
+  "#7c3aed",
+  "#ef4444",
+  "#0ea5e9",
+  "#378ADD",
+];
+
+function AddChildModal({
+  visible,
+  onClose,
+  onCreated,
+}: {
+  visible: boolean;
+  onClose: () => void;
+  onCreated: (child: Child) => void;
+}) {
+  const [name, setName] = useState("");
+  const [color, setColor] = useState(CHILD_COLORS[0]!);
+  const { t } = useTranslation();
+  const { mutate: createChild, isPending } = useCreateChild();
+
+  function handleSave() {
+    const trimmed = name.trim();
+    if (!trimmed) return;
+    createChild(
+      { name: trimmed, color },
+      {
+        onSuccess: (data) => {
+          onCreated(data.child);
+          setName("");
+          setColor(CHILD_COLORS[0]!);
+          onClose();
+        },
+      },
+    );
+  }
+
+  function handleClose() {
+    setName("");
+    setColor(CHILD_COLORS[0]!);
+    onClose();
+  }
+
+  return (
+    <Modal visible={visible} animationType="slide" presentationStyle="pageSheet" onRequestClose={handleClose}>
+      <View className="flex-1 bg-white">
+        {/* Header */}
+        <ModalHeader
+          title={t('children.addChild')}
+          onClose={handleClose}
+          closeLabel={t('common.cancel')}
+          onSave={handleSave}
+          saveLabel={t('common.save')}
+          saveDisabled={!name.trim()}
+          saveLoading={isPending}
+          saveColor="#ec4899"
+        />
+
+        <View className="px-4 mt-6">
+          {/* Name Input */}
+          <Text className="text-sm font-medium text-gray-700 mb-2">Name</Text>
+          <TextInput
+            className="bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-base text-gray-900 mb-6"
+            placeholder="z.B. Emma"
+            value={name}
+            onChangeText={setName}
+            autoFocus
+          />
+
+          {/* Color Picker */}
+          <Text className="text-sm font-medium text-gray-700 mb-3">Farbe</Text>
+          <View className="flex-row flex-wrap gap-3">
+            {CHILD_COLORS.map((c) => (
+              <Pressable
+                key={c}
+                onPress={() => setColor(c)}
+                style={{
+                  width: 40,
+                  height: 40,
+                  borderRadius: 20,
+                  backgroundColor: c,
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderWidth: color === c ? 3 : 0,
+                  borderColor: "#fff",
+                  shadowColor: color === c ? c : "transparent",
+                  shadowOpacity: color === c ? 0.5 : 0,
+                  shadowRadius: 4,
+                  elevation: color === c ? 4 : 0,
+                }}
+              >
+                {color === c && (
+                  <Ionicons name="checkmark" size={20} color="#fff" />
+                )}
+              </Pressable>
+            ))}
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+export default function KinderScreen() {
+  const insets = useSafeAreaInsets();
+  const { t } = useTranslation();
+  const { data: children = [], isLoading } = useChildren();
+  const [activeChildId, setActiveChildId] = useState<string | null>(null);
+  const [showAddModal, setShowAddModal] = useState(false);
+
+  // Determine active child — fall back to first child when list loads
+  const activeChild =
+    children.find((c) => c.id === activeChildId) ?? children[0] ?? null;
+
+  if (isLoading) {
+    return (
+      <View className="flex-1 bg-white items-center justify-center">
+        <ActivityIndicator size="large" color="#ec4899" />
+      </View>
+    );
+  }
+
+  return (
+    <View className="flex-1 bg-white">
+      {/* Empty State */}
+      {children.length === 0 && (
+        <View className="flex-1 items-center justify-center px-8">
+          <Ionicons name="happy-outline" size={72} color="#d1d5db" style={{ marginBottom: 16 }} />
+          <Text className="text-lg font-semibold text-gray-700 mb-2 text-center">
+            {t('children.noChildren')}
+          </Text>
+          <Text className="text-sm text-gray-400 text-center mb-8">
+            {t('children.noChildrenHint')}
+          </Text>
+          <Pressable
+            onPress={() => setShowAddModal(true)}
+            className="px-6 py-3 rounded-full items-center justify-center"
+            style={{ backgroundColor: "#ec4899" }}
+          >
+            <Text className="text-white font-semibold text-base">+ {t('children.addChild')}</Text>
+          </Pressable>
+        </View>
+      )}
+
+      {/* Children Tab Switcher + Content */}
+      {children.length > 0 && activeChild && (
+        <TransactionScreen
+          scope="child"
+          childId={activeChild.id}
+          accentColor={activeChild.color}
+          emptyTitle={t('children.noTransactions', { name: activeChild.name })}
+          emptySubtitle={t('children.noTransactionsHint')}
+          headerExtra={
+            <View className="bg-white border-b border-gray-100">
+              <ScrollView
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                contentContainerStyle={{ paddingHorizontal: 12, paddingVertical: 10, gap: 8, flexDirection: "row", alignItems: "center" }}
+              >
+                {children.map((child) => {
+                  const isActive = child.id === activeChild.id;
+                  return (
+                    <Pressable
+                      key={child.id}
+                      onPress={() => setActiveChildId(child.id)}
+                      style={{
+                        paddingHorizontal: 16,
+                        paddingVertical: 7,
+                        borderRadius: 20,
+                        backgroundColor: isActive ? child.color : "#f3f4f6",
+                      }}
+                    >
+                      <Text
+                        style={{
+                          fontSize: 14,
+                          fontWeight: "600",
+                          color: isActive ? "#fff" : "#4b5563",
+                        }}
+                      >
+                        {child.name}
+                      </Text>
+                    </Pressable>
+                  );
+                })}
+
+                {/* Add Child Button */}
+                <Pressable
+                  onPress={() => setShowAddModal(true)}
+                  style={{
+                    width: 32,
+                    height: 32,
+                    borderRadius: 16,
+                    backgroundColor: "#fce7f3",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  <Ionicons name="add" size={20} color="#ec4899" />
+                </Pressable>
+              </ScrollView>
+            </View>
+          }
+        />
+      )}
+
+      <AddChildModal
+        visible={showAddModal}
+        onClose={() => setShowAddModal(false)}
+        onCreated={(child) => setActiveChildId(child.id)}
+      />
+    </View>
+  );
+}

apps/native/app/(app)/mehr/index.tsx

@@ -0,0 +1,68 @@
+import { Ionicons } from "@expo/vector-icons";
+import { Pressable, ScrollView, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useRouter } from "expo-router";
+import { useTranslation } from "react-i18next";
+
+export default function MehrScreen() {
+  const insets = useSafeAreaInsets();
+  const router = useRouter();
+  const { t } = useTranslation();
+
+  type MenuItem = {
+    icon: React.ComponentProps<typeof Ionicons>["name"];
+    label: string;
+    subtitle: string;
+    color: string;
+    route: string;
+  };
+
+  const MENU_ITEMS: MenuItem[] = [
+    {
+      icon: "airplane-outline",
+      label: t('mehr.vacation'),
+      subtitle: t('mehr.vacationSubtitle'),
+      color: "#0ea5e9",
+      route: "/(app)/urlaub",
+    },
+    {
+      icon: "settings-outline",
+      label: t('settings.title'),
+      subtitle: t('mehr.settingsSubtitle'),
+      color: "#6b7280",
+      route: "/(app)/settings",
+    },
+  ];
+
+  return (
+    <ScrollView
+      className="flex-1 bg-gray-50"
+      contentContainerStyle={{ paddingTop: insets.top + 16, paddingBottom: insets.bottom + 24 }}
+    >
+      <Text className="text-2xl font-bold text-gray-900 px-4 mb-6">{t('tabs.more')}</Text>
+
+      <View className="mx-4 bg-white rounded-2xl overflow-hidden" style={{ borderWidth: 1, borderColor: "#f3f4f6" }}>
+        {MENU_ITEMS.map((item, index) => (
+          <Pressable
+            key={item.route}
+            onPress={() => router.push(item.route as Parameters<typeof router.push>[0])}
+            className="flex-row items-center px-4 py-4 active:bg-gray-50"
+            style={index < MENU_ITEMS.length - 1 ? { borderBottomWidth: 1, borderBottomColor: "#f3f4f6" } : undefined}
+          >
+            <View
+              className="w-10 h-10 rounded-xl items-center justify-center mr-4"
+              style={{ backgroundColor: `${item.color}18` }}
+            >
+              <Ionicons name={item.icon} size={22} color={item.color} />
+            </View>
+            <View className="flex-1">
+              <Text className="text-base font-semibold text-gray-900">{item.label}</Text>
+              <Text className="text-xs text-gray-400 mt-0.5">{item.subtitle}</Text>
+            </View>
+            <Ionicons name="chevron-forward" size={16} color="#d1d5db" />
+          </Pressable>
+        ))}
+      </View>
+    </ScrollView>
+  );
+}

apps/native/app/(app)/months/close.tsx

@@ -0,0 +1,243 @@
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ActivityIndicator,
+  Alert,
+  Pressable,
+  ScrollView,
+  Text,
+  TextInput,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Ionicons } from "@expo/vector-icons";
+import { useSettlementV2 } from "@/src/hooks/useFixedCosts";
+import { useHouseholdSettings } from "@/src/hooks/useHouseholdSettings";
+import { useCloseMonth } from "@/src/hooks/useMonthStatus";
+import { useAuthStore } from "@/src/stores/auth.store";
+import { monthLabel } from "@/src/utils/date";
+import { formatEur } from "@/src/utils/format";
+
+const ACCENT = "#2563EB";
+
+export default function CloseMonthScreen() {
+  const insets = useSafeAreaInsets();
+  const router = useRouter();
+  const { t } = useTranslation();
+  const { month } = useLocalSearchParams<{ month: string }>();
+  const userId = useAuthStore((s) => s.user?.id);
+
+  const { data: settlement, isLoading: settlementLoading } = useSettlementV2(month);
+  const { data: hhSettings } = useHouseholdSettings();
+  const { mutate: closeMonth, isPending } = useCloseMonth(month);
+
+  const remaining = settlement?.remaining ?? 0;
+  const [amountStr, setAmountStr] = useState<string | null>(null);
+  const [notes, setNotes] = useState("");
+
+  // Lazy-init amount from settlement once loaded
+  const displayAmount = amountStr ?? (remaining > 0 ? remaining.toFixed(2).replace(".", ",") : "0,00");
+
+  const others = (settlement?.members ?? []).filter((m) => m.userId !== userId);
+  const otherName = hhSettings?.partnerName ?? others[0]?.name ?? "Partner";
+  const otherUserId = others[0]?.userId ?? "";
+
+  function handleAmountChange(text: string) {
+    // Allow only digits and one comma
+    const cleaned = text.replace(/[^0-9,]/g, "");
+    const parts = cleaned.split(",");
+    if (parts.length > 2) return;
+    if (parts[1] !== undefined && parts[1].length > 2) return;
+    setAmountStr(cleaned);
+  }
+
+  function handleClose() {
+    const amount = parseFloat(displayAmount.replace(",", ".")) || 0;
+
+    Alert.alert(
+      t('monthClose.closeConfirmTitle', { month: monthLabel(month) }),
+      t('monthClose.closeConfirmMessage'),
+      [
+        { text: t('common.cancel'), style: "cancel" },
+        {
+          text: t('monthClose.closeConfirmAction'),
+          style: "destructive",
+          onPress: () => {
+            closeMonth(
+              { finalAmount: amount, toUserId: otherUserId, notes: notes.trim() || undefined },
+              {
+                onSuccess: () => router.back(),
+                onError: (err) =>
+                  Alert.alert(t('common.error'), err.message ?? "Abschluss fehlgeschlagen"),
+              },
+            );
+          },
+        },
+      ],
+    );
+  }
+
+  if (settlementLoading) {
+    return (
+      <View className="flex-1 bg-gray-50 items-center justify-center">
+        <ActivityIndicator size="large" color={ACCENT} />
+      </View>
+    );
+  }
+
+  const s = settlement;
+
+  return (
+    <View className="flex-1 bg-gray-50">
+      {/* Header */}
+      <View
+        className="bg-white border-b border-gray-100"
+        style={{ paddingTop: insets.top }}
+      >
+        <View className="flex-row items-center px-4 py-3">
+          <Pressable onPress={() => router.back()} className="mr-3 p-1">
+            <Ionicons name="chevron-back" size={22} color="#374151" />
+          </Pressable>
+          <Text className="text-base font-semibold text-gray-900 flex-1">
+            {t('monthClose.title', { month: monthLabel(month) })}
+          </Text>
+        </View>
+      </View>
+
+      <ScrollView
+        className="flex-1"
+        contentContainerStyle={{ padding: 16, paddingBottom: insets.bottom + 80 }}
+        keyboardShouldPersistTaps="handled"
+      >
+        {/* Overview card */}
+        {s && (
+          <View className="bg-white rounded-2xl p-4 mb-4" style={{ borderWidth: 1, borderColor: "#f3f4f6" }}>
+            <Text className="text-xs font-medium uppercase text-gray-400 mb-3">{t('monthClose.overview')}</Text>
+
+            <Row label={t('monthClose.householdTotal')} value={`-${formatEur(s.householdExpenses)}`} />
+            {s.householdIncome > 0 && (
+              <Row label={t('monthClose.householdIncome')} value={`+${formatEur(s.householdIncome)}`} color="#16a34a" />
+            )}
+            <Row
+              label={t('monthClose.yourShare', { percent: s.memberCount > 0 ? Math.round(100 / s.memberCount) : 50 })}
+              value={`-${formatEur(s.perMemberShare)}`}
+              bold
+            />
+
+            {s.lineItems.length > 0 && (
+              <>
+                <View className="h-px bg-gray-100 my-2" />
+                {s.lineItems.map((li) => (
+                  <Row key={li.id} label={li.label} value={`-${formatEur(li.amount)}`} />
+                ))}
+              </>
+            )}
+
+            <View className="h-px bg-gray-200 my-3" />
+            <Row label={t('monthClose.totalTransfer')} value={`-${formatEur(s.totalOwed)}`} bold />
+            <Row label={t('monthClose.alreadyTransferred')} value={`-${formatEur(s.alreadyTransferred)}`} />
+          </View>
+        )}
+
+        {/* Remaining amount hero */}
+        <View
+          className="rounded-2xl p-4 mb-4 items-center"
+          style={{ backgroundColor: remaining > 0.01 ? "#fff7ed" : "#f0fdf4", borderWidth: 1, borderColor: remaining > 0.01 ? "#fed7aa" : "#bbf7d0" }}
+        >
+          <Text className="text-xs text-gray-500 mb-1">
+            {remaining > 0.01 ? t('monthClose.receives', { name: otherName }) : remaining < -0.01 ? t('monthClose.youReceive') : t('monthClose.settled')}
+          </Text>
+          <Text
+            className="text-3xl font-bold"
+            style={{ color: remaining > 0.01 ? "#ea580c" : remaining < -0.01 ? "#16a34a" : "#6b7280" }}
+          >
+            {formatEur(Math.abs(remaining))}
+          </Text>
+        </View>
+
+        {/* Amount adjustment */}
+        <View className="bg-white rounded-2xl p-4 mb-4" style={{ borderWidth: 1, borderColor: "#f3f4f6" }}>
+          <Text className="text-sm font-medium text-gray-700 mb-2">
+            {t('monthClose.adjustAmount')}
+          </Text>
+          <Text className="text-xs text-gray-400 mb-3">
+            {t('monthClose.adjustHint')}
+          </Text>
+          <View className="flex-row items-center bg-gray-50 border border-gray-200 rounded-xl px-4 py-3">
+            <Text className="text-base text-gray-400 mr-2">€</Text>
+            <TextInput
+              className="flex-1 text-base text-gray-900"
+              value={displayAmount}
+              onChangeText={handleAmountChange}
+              keyboardType="decimal-pad"
+              selectTextOnFocus
+            />
+          </View>
+        </View>
+
+        {/* Notes */}
+        <View className="bg-white rounded-2xl p-4 mb-6" style={{ borderWidth: 1, borderColor: "#f3f4f6" }}>
+          <Text className="text-sm font-medium text-gray-700 mb-2">{t('monthClose.note')}</Text>
+          <TextInput
+            className="bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-base text-gray-900"
+            placeholder={t('monthClose.notePlaceholder')}
+            value={notes}
+            onChangeText={setNotes}
+            multiline
+          />
+        </View>
+
+        {/* CTA */}
+        <Pressable
+          onPress={handleClose}
+          disabled={isPending}
+          className="rounded-2xl py-4 items-center active:opacity-80 mb-3"
+          style={{ backgroundColor: "#dc2626" }}
+        >
+          {isPending ? (
+            <ActivityIndicator color="#fff" />
+          ) : (
+            <View className="flex-row items-center gap-2">
+              <Ionicons name="lock-closed-outline" size={18} color="#fff" />
+              <Text className="text-base font-semibold text-white">{t('monthClose.closeButton')}</Text>
+            </View>
+          )}
+        </Pressable>
+
+        <Pressable
+          onPress={() => router.back()}
+          className="py-3 items-center active:opacity-50"
+        >
+          <Text className="text-sm text-gray-400">{t('common.cancel')}</Text>
+        </Pressable>
+      </ScrollView>
+    </View>
+  );
+}
+
+function Row({
+  label,
+  value,
+  bold,
+  color,
+}: {
+  label: string;
+  value: string;
+  bold?: boolean;
+  color?: string;
+}) {
+  return (
+    <View className="flex-row justify-between items-center py-1.5">
+      <Text className={`text-sm ${bold ? "font-semibold text-gray-800" : "text-gray-500"}`}>
+        {label}
+      </Text>
+      <Text
+        className={`text-sm ${bold ? "font-semibold text-gray-800" : "text-gray-700"}`}
+        style={color ? { color } : undefined}
+      >
+        {value}
+      </Text>
+    </View>
+  );
+}

apps/native/app/(app)/scanner.tsx

@@ -0,0 +1,459 @@
+import { useRef, useState } from "react";
+import {
+  ActivityIndicator,
+  Alert,
+  Linking,
+  Modal,
+  Pressable,
+  ScrollView,
+  Text,
+  TextInput,
+  View,
+} from "react-native";
+import { CameraView, useCameraPermissions } from "expo-camera";
+import { readAsStringAsync, EncodingType } from "expo-file-system/legacy";
+import { useRouter } from "expo-router";
+import { Ionicons } from "@expo/vector-icons";
+import { useTranslation } from "react-i18next";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@/src/lib/api-client";
+import { useCategories } from "@/src/hooks/useCategories";
+import { TAB_COLORS } from "@/src/constants/colors";
+
+const ACCENT = TAB_COLORS.household;
+
+type ScreenState = "camera" | "scanning" | "confirm" | "booking";
+
+type OcrResponse = {
+  amount: number | null;
+  label: string | null;
+  date: string | null;
+  confidence: number;
+};
+
+type CreateTransactionBody = {
+  amount: number;
+  merchant: string;
+  description: string;
+  date: string;
+  type: "expense";
+  scope: "household" | "private";
+  categoryId?: string;
+};
+
+const FALLBACK_CATEGORIES = [
+  "Lebensmittel",
+  "Restaurant",
+  "Transport",
+  "Shopping",
+  "Haushalt",
+  "Sonstiges",
+];
+
+function todayIso(): string {
+  return new Date().toISOString().slice(0, 10);
+}
+
+export default function ScannerScreen() {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+  const queryClient = useQueryClient();
+
+  const [permission, requestPermission] = useCameraPermissions();
+  const cameraRef = useRef<CameraView>(null);
+
+  const [screenState, setScreenState] = useState<ScreenState>("camera");
+  const [cameraKey, setCameraKey] = useState(0);
+
+  // Confirm sheet state
+  const [label, setLabel] = useState("");
+  const [amountStr, setAmountStr] = useState("");
+  const [date, setDate] = useState(todayIso()); // always YYYY-MM-DD internally
+  const [dateDisplay, setDateDisplay] = useState(() => {
+    const d = todayIso();
+    return `${d.slice(8, 10)}.${d.slice(5, 7)}.${d.slice(0, 4)}`;
+  });
+  const [selectedCategoryId, setSelectedCategoryId] = useState<string | undefined>(undefined);
+  const [scope, setScope] = useState<"household" | "private">("household");
+
+  const { data: categories = [] } = useCategories();
+  const expenseCategories = categories.filter((c) => c.type === "expense");
+  const displayCategories =
+    expenseCategories.length > 0
+      ? expenseCategories.map((c) => ({ id: c.id, name: c.name }))
+      : FALLBACK_CATEGORIES.map((name, i) => ({ id: String(i), name }));
+
+  // ── Permission not yet determined ─────────────────────────────────────────
+  if (!permission) {
+    return (
+      <View className="flex-1 bg-black items-center justify-center">
+        <ActivityIndicator color="#fff" />
+      </View>
+    );
+  }
+
+  // ── Permission denied ─────────────────────────────────────────────────────
+  if (!permission.granted) {
+    return (
+      <View
+        className="flex-1 bg-black items-center justify-center px-8 gap-4"
+        style={{ paddingTop: insets.top, paddingBottom: insets.bottom }}
+      >
+        {/* Back button */}
+        <Pressable
+          onPress={() => router.back()}
+          className="absolute top-0 left-4 p-3"
+          style={{ top: insets.top }}
+        >
+          <Ionicons name="chevron-back" size={26} color="#fff" />
+        </Pressable>
+
+        <Ionicons name="camera-outline" size={64} color="#6b7280" />
+        <Text className="text-white text-center text-base font-medium">
+          {t("scanner.permissionDenied")}
+        </Text>
+        <Pressable
+          onPress={() => void requestPermission()}
+          style={{ backgroundColor: ACCENT }}
+          className="px-6 py-3 rounded-xl"
+        >
+          <Text className="text-white font-semibold">{t("scanner.openSettings")}</Text>
+        </Pressable>
+        <Pressable
+          onPress={() => void Linking.openSettings()}
+          className="px-6 py-3"
+        >
+          <Text className="text-gray-400 text-sm">{t("scanner.openSettings")}</Text>
+        </Pressable>
+      </View>
+    );
+  }
+
+  // ── Capture & OCR ─────────────────────────────────────────────────────────
+  async function handleCapture() {
+    if (!cameraRef.current) return;
+    setScreenState("scanning");
+
+    try {
+      const photo = await cameraRef.current.takePictureAsync({ base64: false, quality: 0.7 });
+      if (!photo?.uri) throw new Error("No photo URI");
+
+      const base64 = await readAsStringAsync(photo.uri, {
+        encoding: EncodingType.Base64,
+      });
+
+      const result = await apiRequest<OcrResponse>("/api/scanner/receipt", {
+        method: "POST",
+        body: JSON.stringify({ imageBase64: base64, mimeType: "image/jpeg" }),
+      });
+
+      setLabel(result.label ?? "");
+      setAmountStr(result.amount != null ? String(result.amount) : "");
+      const isoDate = result.date ?? todayIso();
+      setDate(isoDate);
+      setDateDisplay(`${isoDate.slice(8, 10)}.${isoDate.slice(5, 7)}.${isoDate.slice(0, 4)}`);
+      setScreenState("confirm");
+    } catch {
+      Alert.alert(t("common.error"), t("scanner.error"));
+      setScreenState("camera");
+    }
+  }
+
+  // ── Book transaction ──────────────────────────────────────────────────────
+  async function handleBook() {
+    const amount = parseFloat(amountStr.replace(",", "."));
+    if (!amount || amount <= 0) {
+      Alert.alert(t("common.error"), t("scanner.notRecognized"));
+      return;
+    }
+
+    setScreenState("booking");
+    try {
+      const body: CreateTransactionBody = {
+        amount,
+        merchant: label.trim() || t("scanner.title"),
+        description: label.trim() || t("scanner.title"),
+        date: new Date(date).toISOString(),
+        type: "expense",
+        scope,
+        ...(selectedCategoryId ? { categoryId: selectedCategoryId } : {}),
+      };
+      await apiRequest<unknown>("/api/transactions", {
+        method: "POST",
+        body: JSON.stringify(body),
+      });
+      await queryClient.invalidateQueries({ queryKey: ["transactions"] });
+      handleRetry(); // reset all state
+      router.back();
+    } catch {
+      Alert.alert(t("common.error"), t("scanner.error"));
+      setScreenState("confirm");
+    }
+  }
+
+  function handleRetry() {
+    const today = todayIso();
+    setScreenState("camera");
+    setLabel("");
+    setAmountStr("");
+    setDate(today);
+    setDateDisplay(`${today.slice(8, 10)}.${today.slice(5, 7)}.${today.slice(0, 4)}`);
+    setSelectedCategoryId(undefined);
+    setScope("household");
+    setCameraKey((k) => k + 1);
+  }
+
+  // ── Render ─────────────────────────────────────────────────────────────────
+  return (
+    <View className="flex-1 bg-black">
+      {/* Camera */}
+      <CameraView
+        key={cameraKey}
+        ref={cameraRef}
+        style={{ flex: 1 }}
+        facing="back"
+      />
+
+      {/* Header overlay */}
+      <View
+        className="absolute left-0 right-0 flex-row items-center px-4"
+        style={{ top: insets.top, paddingTop: 8 }}
+      >
+        <Pressable
+          onPress={() => router.back()}
+          className="w-10 h-10 rounded-full bg-black/40 items-center justify-center"
+        >
+          <Ionicons name="chevron-back" size={22} color="#fff" />
+        </Pressable>
+        <Text className="flex-1 text-center text-white font-semibold text-base mr-10">
+          {t("scanner.title")}
+        </Text>
+      </View>
+
+      {/* Hint text */}
+      {screenState === "camera" && (
+        <View
+          className="absolute left-0 right-0 items-center"
+          style={{ top: insets.top + 64 }}
+        >
+          <View className="bg-black/40 px-4 py-2 rounded-full">
+            <Text className="text-white text-sm">{t("scanner.hint")}</Text>
+          </View>
+        </View>
+      )}
+
+      {/* Viewfinder frame */}
+      {screenState === "camera" && (
+        <View className="absolute inset-0 items-center justify-center">
+          <View
+            className="border-2 border-white/60 rounded-2xl"
+            style={{ width: "85%", height: "75%" }}
+          />
+        </View>
+      )}
+
+      {/* Capture button */}
+      {screenState === "camera" && (
+        <View
+          className="absolute left-0 right-0 items-center"
+          style={{ bottom: insets.bottom + 40 }}
+        >
+          <Pressable
+            onPress={() => void handleCapture()}
+            className="w-[72px] h-[72px] rounded-full bg-white items-center justify-center active:opacity-80"
+            style={{
+              shadowColor: "#000",
+              shadowOpacity: 0.3,
+              shadowRadius: 8,
+              shadowOffset: { width: 0, height: 2 },
+            }}
+          >
+            <View className="w-16 h-16 rounded-full border-4 border-gray-300" />
+          </Pressable>
+          <Text className="text-white/70 text-xs mt-3">{t("scanner.capture")}</Text>
+        </View>
+      )}
+
+      {/* Scanning overlay */}
+      {screenState === "scanning" && (
+        <View className="absolute inset-0 bg-black/70 items-center justify-center gap-4">
+          <ActivityIndicator size="large" color="#fff" />
+          <Text className="text-white text-base font-medium">{t("scanner.scanning")}</Text>
+        </View>
+      )}
+
+      {/* Booking overlay */}
+      {screenState === "booking" && (
+        <View className="absolute inset-0 bg-black/70 items-center justify-center gap-4">
+          <ActivityIndicator size="large" color="#fff" />
+          <Text className="text-white text-base font-medium">{t("common.loading")}</Text>
+        </View>
+      )}
+
+      {/* Confirmation sheet */}
+      <Modal
+        visible={screenState === "confirm"}
+        animationType="slide"
+        presentationStyle="pageSheet"
+        onRequestClose={handleRetry}
+      >
+        <View className="flex-1 bg-white">
+          {/* Sheet header */}
+          <View
+            className="flex-row items-center px-4 py-4 border-b border-gray-100"
+            style={{ paddingTop: insets.top > 0 ? 12 : 12 }}
+          >
+            <Pressable onPress={handleRetry} className="py-1 pr-4">
+              <Text className="text-base" style={{ color: ACCENT }}>
+                {t("scanner.retry")}
+              </Text>
+            </Pressable>
+            <Text className="flex-1 text-center font-semibold text-base text-gray-900">
+              {t("scanner.detected")}
+            </Text>
+            <Pressable
+              onPress={() => void handleBook()}
+              className="py-1 pl-4"
+              style={{ opacity: !amountStr || parseFloat(amountStr) <= 0 ? 0.4 : 1 }}
+              disabled={!amountStr || parseFloat(amountStr) <= 0}
+            >
+              <Text className="text-base font-semibold" style={{ color: ACCENT }}>
+                {t("scanner.book")}
+              </Text>
+            </Pressable>
+          </View>
+
+          <ScrollView className="flex-1 px-4 pt-4" keyboardShouldPersistTaps="handled">
+            {/* Merchant */}
+            <Text className="text-xs text-gray-400 font-medium mb-1 ml-1">
+              {t("scanner.merchant").toUpperCase()}
+            </Text>
+            <TextInput
+              value={label}
+              onChangeText={setLabel}
+              placeholder={t("scanner.merchant")}
+              placeholderTextColor="#9ca3af"
+              className="bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-base text-gray-900 mb-4"
+            />
+
+            {/* Amount */}
+            <Text className="text-xs text-gray-400 font-medium mb-1 ml-1">
+              {t("scanner.amount").toUpperCase()}
+            </Text>
+            <View className="bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 flex-row items-center mb-4">
+              <TextInput
+                value={amountStr}
+                onChangeText={setAmountStr}
+                placeholder="0.00"
+                placeholderTextColor="#9ca3af"
+                keyboardType="decimal-pad"
+                className="flex-1 text-base text-gray-900"
+              />
+              <Text className="text-base text-gray-400 ml-2">€</Text>
+            </View>
+
+            {/* Date */}
+            <Text className="text-xs text-gray-400 font-medium mb-1 ml-1">
+              {t("scanner.date").toUpperCase()}
+            </Text>
+            <TextInput
+              value={dateDisplay}
+              onChangeText={(v) => {
+                setDateDisplay(v);
+                // Convert DD.MM.YYYY → YYYY-MM-DD for internal state
+                const parts = v.split(".");
+                if (parts.length === 3 && parts[2]?.length === 4) {
+                  setDate(`${parts[2]}-${parts[1]?.padStart(2, "0")}-${parts[0]?.padStart(2, "0")}`);
+                }
+              }}
+              placeholder="TT.MM.JJJJ"
+              placeholderTextColor="#9ca3af"
+              keyboardType="numbers-and-punctuation"
+              className="bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-base text-gray-900 mb-4"
+            />
+
+            {/* Category */}
+            <Text className="text-xs text-gray-400 font-medium mb-2 ml-1">
+              {t("scanner.category").toUpperCase()}
+            </Text>
+            <ScrollView
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              className="mb-4"
+              contentContainerStyle={{ gap: 8, paddingRight: 16 }}
+            >
+              {displayCategories.map((cat) => {
+                const isSelected = selectedCategoryId === cat.id;
+                return (
+                  <Pressable
+                    key={cat.id}
+                    onPress={() =>
+                      setSelectedCategoryId(isSelected ? undefined : cat.id)
+                    }
+                    style={{
+                      backgroundColor: isSelected ? ACCENT : "#f3f4f6",
+                      borderWidth: 1,
+                      borderColor: isSelected ? ACCENT : "#e5e7eb",
+                    }}
+                    className="px-4 py-2 rounded-full active:opacity-70"
+                  >
+                    <Text
+                      className="text-sm font-medium"
+                      style={{ color: isSelected ? "#fff" : "#4b5563" }}
+                    >
+                      {cat.name}
+                    </Text>
+                  </Pressable>
+                );
+              })}
+            </ScrollView>
+
+            {/* Scope */}
+            <Text className="text-xs text-gray-400 font-medium mb-2 ml-1">
+              {t("scanner.scope").toUpperCase()}
+            </Text>
+            <View className="flex-row gap-3 mb-8">
+              <Pressable
+                onPress={() => setScope("household")}
+                style={{
+                  flex: 1,
+                  backgroundColor: scope === "household" ? ACCENT : "#f3f4f6",
+                  borderWidth: 1,
+                  borderColor: scope === "household" ? ACCENT : "#e5e7eb",
+                }}
+                className="py-3 rounded-xl items-center active:opacity-70"
+              >
+                <Text
+                  className="text-sm font-semibold"
+                  style={{ color: scope === "household" ? "#fff" : "#4b5563" }}
+                >
+                  {t("scanner.household")}
+                </Text>
+              </Pressable>
+              <Pressable
+                onPress={() => setScope("private")}
+                style={{
+                  flex: 1,
+                  backgroundColor: scope === "private" ? "#7C3AED" : "#f3f4f6",
+                  borderWidth: 1,
+                  borderColor: scope === "private" ? "#7C3AED" : "#e5e7eb",
+                }}
+                className="py-3 rounded-xl items-center active:opacity-70"
+              >
+                <Text
+                  className="text-sm font-semibold"
+                  style={{ color: scope === "private" ? "#fff" : "#4b5563" }}
+                >
+                  {t("scanner.private")}
+                </Text>
+              </Pressable>
+            </View>
+          </ScrollView>
+        </View>
+      </Modal>
+    </View>
+  );
+}

apps/native/app/(app)/settings/categories.tsx

@@ -0,0 +1,233 @@
+import { useCategories, useDeleteCategory, useUpdateCategory, type Category } from "@/src/hooks/useCategories";
+import { AddCategoryModal } from "@/src/components/features/categories/AddCategoryModal";
+import { ModalHeader } from "@/src/components/ui/ModalHeader";
+import { Ionicons } from "@expo/vector-icons";
+import { useRouter } from "expo-router";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ActivityIndicator,
+  Alert,
+  Modal,
+  Pressable,
+  ScrollView,
+  Text,
+  TextInput,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+// ── Edit Modal ─────────────────────────────────────────────────────────────────
+
+function EditCategoryModal({
+  category,
+  onClose,
+}: {
+  category: Category | null;
+  onClose: () => void;
+}) {
+  const [name, setName] = useState(category?.name ?? "");
+  const { mutate: update, isPending } = useUpdateCategory();
+  const { t } = useTranslation();
+
+  function handleSave() {
+    if (!category || !name.trim()) return;
+    update(
+      { id: category.id, name: name.trim() },
+      { onSuccess: onClose },
+    );
+  }
+
+  return (
+    <Modal
+      visible={!!category}
+      animationType="slide"
+      presentationStyle="pageSheet"
+      onRequestClose={onClose}
+    >
+      <View className="flex-1 bg-white">
+        <ModalHeader
+          title={t('categories.editTitle')}
+          onClose={onClose}
+          closeLabel={t('common.cancel')}
+          onSave={handleSave}
+          saveLabel={t('common.save')}
+          saveDisabled={!name.trim()}
+          saveLoading={isPending}
+        />
+
+        <View className="px-4 mt-6">
+          <Text className="text-sm font-medium text-gray-700 mb-2">{t('categories.nameLabel')}</Text>
+          <TextInput
+            className="bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-base text-gray-900"
+            value={name}
+            onChangeText={setName}
+            autoFocus
+          />
+          {category?.isDefault && (
+            <Text className="text-xs text-gray-400 mt-2">
+              {t('categories.defaultWarning')}
+            </Text>
+          )}
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+// ── Category Row ───────────────────────────────────────────────────────────────
+
+function CategoryRow({
+  category,
+  onEdit,
+  onDelete,
+}: {
+  category: Category;
+  onEdit: () => void;
+  onDelete: () => void;
+}) {
+  const { t } = useTranslation();
+  return (
+    <View className="flex-row items-center justify-between py-3 border-b border-gray-100">
+      <View className="flex-row items-center gap-3">
+        <View
+          className="w-9 h-9 rounded-full items-center justify-center"
+          style={{ backgroundColor: category.color ?? "#6b7280" }}
+        >
+          <Ionicons name={category.icon} size={18} color="#fff" />
+        </View>
+        <Text className="text-base text-gray-800">{category.name}</Text>
+        {category.isDefault && (
+          <View className="bg-gray-100 rounded px-1.5 py-0.5">
+            <Text className="text-xs text-gray-400">{t('categories.default')}</Text>
+          </View>
+        )}
+      </View>
+      <View className="flex-row gap-3">
+        <Pressable onPress={onEdit} className="p-1 active:opacity-50">
+          <Ionicons name="pencil-outline" size={18} color="#6b7280" />
+        </Pressable>
+        {!category.isDefault && (
+          <Pressable onPress={onDelete} className="p-1 active:opacity-50">
+            <Ionicons name="trash-outline" size={18} color="#dc2626" />
+          </Pressable>
+        )}
+      </View>
+    </View>
+  );
+}
+
+// ── Main Screen ────────────────────────────────────────────────────────────────
+
+export default function CategoriesScreen() {
+  const insets = useSafeAreaInsets();
+  const router = useRouter();
+  const { t } = useTranslation();
+  const { data: categories = [], isLoading } = useCategories();
+  const { mutate: deleteCategory } = useDeleteCategory();
+
+  const [editingCategory, setEditingCategory] = useState<Category | null>(null);
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [addType, setAddType] = useState<"income" | "expense">("expense");
+
+  const expenseCategories = categories.filter((c) => c.type === "expense");
+  const incomeCategories = categories.filter((c) => c.type === "income");
+
+  function handleDelete(category: Category) {
+    Alert.alert(
+      t('categories.deleteTitle'),
+      t('categories.deleteMessage', { name: category.name }),
+      [
+        { text: t('common.cancel'), style: "cancel" },
+        {
+          text: t('common.delete'),
+          style: "destructive",
+          onPress: () =>
+            deleteCategory(category.id, {
+              onError: (err) => {
+                Alert.alert(t('common.error'), err.message);
+              },
+            }),
+        },
+      ],
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <View className="flex-1 bg-white items-center justify-center">
+        <ActivityIndicator size="large" color="#2563EB" />
+      </View>
+    );
+  }
+
+  return (
+    <View className="flex-1 bg-gray-50" style={{ paddingTop: insets.top }}>
+      {/* Header */}
+      <View className="flex-row items-center px-4 py-4 bg-white border-b border-gray-100">
+        <Pressable onPress={() => router.push("/(app)/settings")} className="mr-3 active:opacity-50">
+          <Ionicons name="chevron-back" size={24} color="#374151" />
+        </Pressable>
+        <Text className="text-lg font-semibold text-gray-900">{t('settings.categories')}</Text>
+      </View>
+
+      <ScrollView contentContainerStyle={{ padding: 16 }}>
+        {/* Expense Categories */}
+        <View className="mb-6 rounded-xl bg-white p-4">
+          <View className="flex-row items-center justify-between mb-3">
+            <Text className="text-xs font-medium uppercase text-gray-400">{t('categories.expenseSection')}</Text>
+          </View>
+          {expenseCategories.map((cat) => (
+            <CategoryRow
+              key={cat.id}
+              category={cat}
+              onEdit={() => setEditingCategory(cat)}
+              onDelete={() => handleDelete(cat)}
+            />
+          ))}
+          <Pressable
+            onPress={() => { setAddType("expense"); setShowAddModal(true); }}
+            className="mt-3 flex-row items-center gap-2 py-2 active:opacity-50"
+          >
+            <Ionicons name="add-circle-outline" size={18} color="#2563EB" />
+            <Text className="text-sm font-medium text-blue-600">{t('categories.addExpenseCategory')}</Text>
+          </Pressable>
+        </View>
+
+        {/* Income Categories */}
+        <View className="mb-6 rounded-xl bg-white p-4">
+          <View className="flex-row items-center justify-between mb-3">
+            <Text className="text-xs font-medium uppercase text-gray-400">{t('categories.incomeSection')}</Text>
+          </View>
+          {incomeCategories.map((cat) => (
+            <CategoryRow
+              key={cat.id}
+              category={cat}
+              onEdit={() => setEditingCategory(cat)}
+              onDelete={() => handleDelete(cat)}
+            />
+          ))}
+          <Pressable
+            onPress={() => { setAddType("income"); setShowAddModal(true); }}
+            className="mt-3 flex-row items-center gap-2 py-2 active:opacity-50"
+          >
+            <Ionicons name="add-circle-outline" size={18} color="#2563EB" />
+            <Text className="text-sm font-medium text-blue-600">{t('categories.addIncomeCategory')}</Text>
+          </Pressable>
+        </View>
+      </ScrollView>
+
+      <EditCategoryModal
+        key={editingCategory?.id}
+        category={editingCategory}
+        onClose={() => setEditingCategory(null)}
+      />
+
+      <AddCategoryModal
+        visible={showAddModal}
+        onClose={() => setShowAddModal(false)}
+        defaultType={addType}
+      />
+    </View>
+  );
+}

apps/native/app/(app)/settings/fixed-costs.tsx

@@ -0,0 +1,317 @@
+import { Ionicons } from "@expo/vector-icons";
+import { useState } from "react";
+import {
+  ActivityIndicator,
+  Alert,
+  Modal,
+  Pressable,
+  ScrollView,
+  SectionList,
+  Text,
+  TextInput,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useRouter } from "expo-router";
+import { useTranslation } from "react-i18next";
+import {
+  useFixedCosts,
+  useCreateFixedCost,
+  useUpdateFixedCost,
+  useDeleteFixedCost,
+  type FixedCost,
+  type CreateFixedCostInput,
+} from "@/src/hooks/useFixedCosts";
+import { useCategories } from "@/src/hooks/useCategories";
+import { ModalHeader } from "@/src/components/ui/ModalHeader";
+import { Numpad } from "@/src/components/ui/Numpad";
+import { formatEur } from "@/src/utils/format";
+import { handleNumpadKey, parseAmountStr } from "@/src/utils/numpad";
+
+const SCOPE_LABEL_KEYS: Record<string, string> = {
+  household: "fixedCosts.household",
+  private: "fixedCosts.me",
+  child: "fixedCosts.children",
+};
+
+// ── Add / Edit Modal ──────────────────────────────────────────────────────────
+
+type ModalMode =
+  | { kind: "add"; scope: "household" | "private" | "child" }
+  | { kind: "edit"; item: FixedCost };
+
+function FixedCostModal({
+  mode,
+  onClose,
+}: {
+  mode: ModalMode;
+  onClose: () => void;
+}) {
+  const isEdit = mode.kind === "edit";
+  const { data: categories = [] } = useCategories();
+  const { mutate: create, isPending: creating } = useCreateFixedCost();
+  const { mutate: update, isPending: updating } = useUpdateFixedCost();
+  const { t: tFn } = useTranslation();
+
+  const [label, setLabel] = useState(isEdit ? mode.item.label : "");
+  const [amountStr, setAmountStr] = useState(
+    isEdit ? String(mode.item.amount).replace(".", ",") : "0",
+  );
+  const [type, setType] = useState<"expense" | "income">(
+    isEdit ? mode.item.type : "expense",
+  );
+  const [categoryId, setCategoryId] = useState<string | null>(
+    isEdit ? (mode.item.categoryId ?? null) : null,
+  );
+  const [showCategoryPicker, setShowCategoryPicker] = useState(false);
+
+  const filteredCategories = categories.filter((c) => c.type === type);
+  const selectedCategory = categories.find((c) => c.id === categoryId) ?? null;
+  const isPending = creating || updating;
+
+  function handleNumpad(key: string) {
+    setAmountStr((prev) => handleNumpadKey(prev, key));
+  }
+
+  function handleSave() {
+    const amount = parseAmountStr(amountStr);
+    if (!label.trim() || !amount || amount <= 0) return;
+
+    if (isEdit) {
+      update(
+        { id: mode.item.id, input: { label: label.trim(), amount, categoryId } },
+        { onSuccess: onClose },
+      );
+    } else {
+      const input: CreateFixedCostInput = {
+        scope: mode.scope,
+        label: label.trim(),
+        amount,
+        type,
+        categoryId: categoryId ?? undefined,
+      };
+      create(input, { onSuccess: onClose });
+    }
+  }
+
+  const canSave = label.trim().length > 0 && parseAmountStr(amountStr) > 0;
+
+  return (
+    <Modal visible animationType="slide" presentationStyle="pageSheet" onRequestClose={onClose}>
+      <View className="flex-1 bg-white">
+        <ModalHeader
+          title={isEdit ? tFn('fixedCosts.editTitle') : tFn('fixedCosts.addTitle')}
+          onClose={onClose}
+          closeLabel={tFn('common.cancel')}
+          onSave={handleSave}
+          saveLabel={tFn('common.save')}
+          saveDisabled={!canSave}
+          saveLoading={isPending}
+        />
+
+        <ScrollView keyboardShouldPersistTaps="handled" contentContainerStyle={{ paddingBottom: 24 }}>
+          {/* Amount */}
+          <View className="items-center py-6">
+            <Text className="text-5xl font-bold text-gray-900">€ {amountStr}</Text>
+          </View>
+
+          <View className="px-4 gap-3 mb-4">
+            {/* Type toggle (only for new) */}
+            {!isEdit && (
+              <View className="flex-row p-1 bg-gray-100 rounded-xl">
+                {(["expense", "income"] as const).map((t) => (
+                  <Pressable
+                    key={t}
+                    onPress={() => { setType(t); setCategoryId(null); }}
+                    className={`flex-1 py-2 rounded-lg items-center ${type === t ? "bg-white shadow-sm" : ""}`}
+                  >
+                    <Text className={`font-medium ${type === t ? (t === "expense" ? "text-red-600" : "text-green-600") : "text-gray-500"}`}>
+                      {t === "expense" ? tFn('fixedCosts.expenseType') : tFn('fixedCosts.incomeType')}
+                    </Text>
+                  </Pressable>
+                ))}
+              </View>
+            )}
+
+            {/* Label */}
+            <View>
+              <Text className="text-sm font-medium text-gray-700 mb-1">{tFn('fixedCosts.labelRequired')}</Text>
+              <TextInput
+                className="bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-base text-gray-900"
+                placeholder={tFn('fixedCosts.labelPlaceholder')}
+                value={label}
+                onChangeText={setLabel}
+              />
+            </View>
+
+            {/* Category */}
+            <View>
+              <Text className="text-sm font-medium text-gray-700 mb-1">{tFn('fixedCosts.categoryOptional')}</Text>
+              <Pressable
+                onPress={() => setShowCategoryPicker((v) => !v)}
+                className="flex-row items-center bg-gray-50 border border-gray-200 rounded-xl px-4 py-3"
+              >
+                <Text className="flex-1 text-base" style={{ color: selectedCategory ? "#111827" : "#9ca3af" }}>
+                  {selectedCategory ? selectedCategory.name : tFn('common.select')}
+                </Text>
+                {selectedCategory ? (
+                  <Pressable onPress={(e) => { e.stopPropagation(); setCategoryId(null); }} hitSlop={8}>
+                    <Ionicons name="close-circle" size={18} color="#9ca3af" />
+                  </Pressable>
+                ) : (
+                  <Ionicons name={showCategoryPicker ? "chevron-up" : "chevron-down"} size={14} color="#9ca3af" />
+                )}
+              </Pressable>
+              {showCategoryPicker && (
+                <View className="mt-1 bg-white border border-gray-200 rounded-xl overflow-hidden">
+                  {filteredCategories.map((cat) => (
+                    <Pressable
+                      key={cat.id}
+                      onPress={() => { setCategoryId(cat.id); setShowCategoryPicker(false); }}
+                      className="flex-row items-center px-4 py-3 active:bg-gray-50"
+                      style={{ borderBottomWidth: 1, borderBottomColor: "#f3f4f6" }}
+                    >
+                      <View className="w-6 h-6 rounded-full mr-3 items-center justify-center" style={{ backgroundColor: cat.color ?? "#6b7280" }}>
+                        <Ionicons name={(cat.icon ?? "ellipsis-horizontal-circle-outline") as React.ComponentProps<typeof Ionicons>["name"]} size={12} color="#fff" />
+                      </View>
+                      <Text className="text-sm text-gray-800">{cat.name}</Text>
+                      {categoryId === cat.id && <Ionicons name="checkmark" size={16} color="#2563EB" style={{ marginLeft: "auto" }} />}
+                    </Pressable>
+                  ))}
+                </View>
+              )}
+            </View>
+          </View>
+
+          {/* Numpad */}
+          <Numpad onKeyPress={handleNumpad} />
+        </ScrollView>
+      </View>
+    </Modal>
+  );
+}
+
+// ── Row ───────────────────────────────────────────────────────────────────────
+
+function FixedCostRow({
+  item,
+  onEdit,
+  onDelete,
+}: {
+  item: FixedCost;
+  onEdit: (item: FixedCost) => void;
+  onDelete: (item: FixedCost) => void;
+}) {
+  const { t } = useTranslation();
+  return (
+    <View className="flex-row items-center px-4 py-3 bg-white border-b border-gray-50">
+      <View className="flex-1">
+        <Text className="text-sm font-medium text-gray-900">{item.label}</Text>
+        <Text className="text-xs text-gray-400 mt-0.5">
+          {item.type === "expense" ? t('fixedCosts.expenseType') : t('fixedCosts.incomeType')} · {t('common.monthly')}
+        </Text>
+      </View>
+      <Text className="text-sm font-semibold text-gray-800 mr-3">{formatEur(item.amount, false)}</Text>
+      <Pressable onPress={() => onEdit(item)} hitSlop={8} className="mr-2 p-1">
+        <Ionicons name="pencil-outline" size={16} color="#6b7280" />
+      </Pressable>
+      <Pressable onPress={() => onDelete(item)} hitSlop={8} className="p-1">
+        <Ionicons name="trash-outline" size={16} color="#d1d5db" />
+      </Pressable>
+    </View>
+  );
+}
+
+// ── Screen ────────────────────────────────────────────────────────────────────
+
+export default function FixedCostsScreen() {
+  const insets = useSafeAreaInsets();
+  const router = useRouter();
+  const { t } = useTranslation();
+  const { data: allFixedCosts = [], isLoading } = useFixedCosts();
+  const { mutate: deleteCost } = useDeleteFixedCost();
+  const [modalMode, setModalMode] = useState<ModalMode | null>(null);
+
+  const active = allFixedCosts.filter((fc) => fc.isActive);
+
+  const sections = (["household", "private", "child"] as const)
+    .map((scope) => ({
+      scope,
+      title: t(SCOPE_LABEL_KEYS[scope] ?? scope),
+      data: active.filter((fc) => fc.scope === scope),
+    }))
+    .filter((s) => s.data.length > 0 || true); // always show all scopes
+
+  function handleDelete(item: FixedCost) {
+    Alert.alert(
+      t('fixedCosts.pauseTitle'),
+      t('fixedCosts.pauseMessage', { label: item.label }),
+      [
+        { text: t('common.cancel'), style: "cancel" },
+        { text: t('fixedCosts.pause'), style: "destructive", onPress: () => deleteCost(item.id) },
+      ],
+    );
+  }
+
+  return (
+    <View className="flex-1 bg-gray-50">
+      {/* Header */}
+      <View
+        className="bg-white border-b border-gray-100"
+        style={{ paddingTop: insets.top }}
+      >
+        <View className="flex-row items-center px-4 py-3">
+          <Pressable onPress={() => router.push("/(app)/settings")} className="mr-3 p-1">
+            <Ionicons name="chevron-back" size={22} color="#374151" />
+          </Pressable>
+          <Text className="text-base font-semibold text-gray-900 flex-1">{t('fixedCosts.title')}</Text>
+        </View>
+      </View>
+
+      {isLoading ? (
+        <View className="flex-1 items-center justify-center">
+          <ActivityIndicator size="large" color="#2563EB" />
+        </View>
+      ) : (
+        <SectionList
+          sections={sections}
+          keyExtractor={(item) => item.id}
+          renderSectionHeader={({ section }) => (
+            <View className="flex-row items-center justify-between px-4 py-3 bg-gray-50">
+              <Text className="text-xs font-semibold uppercase text-gray-500 tracking-wide">
+                {section.title}
+              </Text>
+              <Pressable
+                onPress={() => setModalMode({ kind: "add", scope: section.scope })}
+                className="flex-row items-center gap-1 px-3 py-1.5 rounded-full"
+                style={{ backgroundColor: "#dbeafe" }}
+              >
+                <Ionicons name="add" size={14} color="#2563EB" />
+                <Text className="text-xs font-semibold text-blue-600">{t('common.new')}</Text>
+              </Pressable>
+            </View>
+          )}
+          renderItem={({ item }) => (
+            <FixedCostRow
+              item={item}
+              onEdit={(i) => setModalMode({ kind: "edit", item: i })}
+              onDelete={handleDelete}
+            />
+          )}
+          renderSectionFooter={({ section }) =>
+            section.data.length === 0 ? (
+              <View className="px-4 py-3 bg-white border-b border-gray-50">
+                <Text className="text-sm text-gray-400 italic">{t('fixedCosts.noItems')}</Text>
+              </View>
+            ) : null
+          }
+          contentContainerStyle={{ paddingBottom: insets.bottom + 24 }}
+        />
+      )}
+
+      {modalMode && (
+        <FixedCostModal mode={modalMode} onClose={() => setModalMode(null)} />
+      )}
+    </View>
+  );
+}

apps/native/app/(app)/settings/household.tsx

@@ -0,0 +1,269 @@
+import { Ionicons } from "@expo/vector-icons";
+import { useRouter } from "expo-router";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ActivityIndicator,
+  Alert,
+  Pressable,
+  ScrollView,
+  Switch,
+  Text,
+  TextInput,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useHouseholdSettings, useUpdateHouseholdSettings } from "@/src/hooks/useHouseholdSettings";
+import { useHouseholdMembers } from "@/src/hooks/useHouseholdMembers";
+
+const ACCENT = "#2563EB";
+const SHARE_PRESETS = [50, 60, 75, 100];
+
+function SettingsRow({
+  label,
+  value,
+  onPress,
+}: {
+  label: string;
+  value: string;
+  onPress: () => void;
+}) {
+  return (
+    <Pressable
+      onPress={onPress}
+      className="flex-row items-center justify-between py-3 border-b border-gray-100 active:opacity-70"
+    >
+      <Text className="text-base text-gray-900">{label}</Text>
+      <View className="flex-row items-center gap-2">
+        <Text className="text-base text-gray-500">{value}</Text>
+        <Ionicons name="pencil-outline" size={14} color="#9ca3af" />
+      </View>
+    </Pressable>
+  );
+}
+
+function EditModal({
+  title,
+  initialValue,
+  keyboardType,
+  onSave,
+  onClose,
+}: {
+  title: string;
+  initialValue: string;
+  keyboardType?: "default" | "decimal-pad";
+  onSave: (value: string) => void;
+  onClose: () => void;
+}) {
+  const [value, setValue] = useState(initialValue);
+  const { t } = useTranslation();
+  return (
+    <View
+      style={{
+        position: "absolute", inset: 0, backgroundColor: "rgba(0,0,0,0.4)",
+        alignItems: "center", justifyContent: "center", zIndex: 100,
+      }}
+    >
+      <View className="bg-white rounded-2xl mx-6 p-5 w-full" style={{ maxWidth: 340 }}>
+        <Text className="text-base font-semibold text-gray-900 mb-3">{title}</Text>
+        <TextInput
+          className="bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-base text-gray-900 mb-4"
+          value={value}
+          onChangeText={setValue}
+          keyboardType={keyboardType ?? "default"}
+          autoFocus
+          autoCapitalize="words"
+        />
+        <View className="flex-row gap-3">
+          <Pressable
+            onPress={onClose}
+            className="flex-1 py-3 rounded-xl items-center bg-gray-100 active:opacity-70"
+          >
+            <Text className="text-sm font-semibold text-gray-700">{t('common.cancel')}</Text>
+          </Pressable>
+          <Pressable
+            onPress={() => { onSave(value); onClose(); }}
+            className="flex-1 py-3 rounded-xl items-center active:opacity-70"
+            style={{ backgroundColor: ACCENT }}
+          >
+            <Text className="text-sm font-semibold text-white">{t('common.save')}</Text>
+          </Pressable>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+type EditingField = "ownerName" | "partnerName" | "monthlyBudget" | "userSharePercent" | null;
+
+export default function HouseholdSettingsScreen() {
+  const insets = useSafeAreaInsets();
+  const router = useRouter();
+  const { t } = useTranslation();
+  const { data: settings, isLoading } = useHouseholdSettings();
+  const { data: membersData } = useHouseholdMembers();
+  const { mutate: update, isPending } = useUpdateHouseholdSettings();
+  const [editing, setEditing] = useState<EditingField>(null);
+  const members = membersData?.members ?? [];
+
+  function save(input: Parameters<typeof update>[0]) {
+    update(input, {
+      onError: () => Alert.alert(t('common.error'), t('settings.saveError')),
+    });
+  }
+
+  if (isLoading || !settings) {
+    return (
+      <View className="flex-1 bg-gray-50 items-center justify-center">
+        <ActivityIndicator size="large" color={ACCENT} />
+      </View>
+    );
+  }
+
+  return (
+    <View className="flex-1 bg-gray-50">
+      <View
+        className="bg-white border-b border-gray-100"
+        style={{ paddingTop: insets.top }}
+      >
+        <View className="flex-row items-center px-4 py-3">
+          <Pressable onPress={() => router.push("/(app)/settings")} className="mr-3 p-1">
+            <Ionicons name="chevron-back" size={22} color="#374151" />
+          </Pressable>
+          <Text className="text-base font-semibold text-gray-900 flex-1">{t('settings.household.title')}</Text>
+          {isPending && <ActivityIndicator size="small" color={ACCENT} />}
+        </View>
+      </View>
+
+      <ScrollView contentContainerStyle={{ padding: 16, paddingBottom: insets.bottom + 32 }}>
+        {/* Namen */}
+        <View className="bg-white rounded-2xl px-4 mb-4">
+          <Text className="text-xs font-medium uppercase text-gray-400 pt-3 mb-1">{t('settings.household.namesSection')}</Text>
+          <SettingsRow
+            label={t('settings.household.yourName')}
+            value={settings.ownerName}
+            onPress={() => setEditing("ownerName")}
+          />
+          <SettingsRow
+            label={t('settings.household.partnerName')}
+            value={settings.partnerName}
+            onPress={() => setEditing("partnerName")}
+          />
+        </View>
+
+        {/* Wer zahlt die Ausgaben vor? */}
+        {members.length > 1 && (
+          <View className="bg-white rounded-2xl px-4 mb-4">
+            <Text className="text-xs font-medium uppercase text-gray-400 pt-3 mb-1">{t('settings.household.payerSection')}</Text>
+            <Text className="text-xs text-gray-400 mb-3">{t('settings.household.payerHint')}</Text>
+            <View className="flex-row gap-2 mb-3">
+              {members.map((m) => {
+                const isSelected = settings.payerUserId === m.userId;
+                return (
+                  <Pressable
+                    key={m.userId}
+                    onPress={() => save({ payerUserId: m.userId })}
+                    className="flex-1 py-2.5 rounded-xl items-center"
+                    style={{ backgroundColor: isSelected ? ACCENT : "#f3f4f6" }}
+                  >
+                    <Text className="text-sm font-semibold" style={{ color: isSelected ? "#fff" : "#374151" }}>
+                      {m.name}
+                    </Text>
+                  </Pressable>
+                );
+              })}
+            </View>
+          </View>
+        )}
+
+        {/* Kostenaufteilung */}
+        <View className="bg-white rounded-2xl px-4 mb-4">
+          <Text className="text-xs font-medium uppercase text-gray-400 pt-3 mb-2">{t('settings.household.costSplitSection')}</Text>
+
+          <Text className="text-xs text-gray-400 mb-3">{t('settings.household.costSplitHint')}</Text>
+          <View className="flex-row gap-2 mb-3">
+            {SHARE_PRESETS.map((p) => (
+              <Pressable
+                key={p}
+                onPress={() => save({ userSharePercent: p })}
+                className="flex-1 py-2.5 rounded-xl items-center"
+                style={{ backgroundColor: settings.userSharePercent === p ? ACCENT : "#f3f4f6" }}
+              >
+                <Text
+                  className="text-sm font-semibold"
+                  style={{ color: settings.userSharePercent === p ? "#fff" : "#374151" }}
+                >
+                  {p}%
+                </Text>
+              </Pressable>
+            ))}
+          </View>
+
+          <View
+            className="rounded-xl px-3 py-2 mb-3"
+            style={{ backgroundColor: "#eff6ff" }}
+          >
+            <Text className="text-xs text-blue-700">
+              {t('settings.household.sharePreview', { own: settings.userSharePercent, partner: settings.partnerName, rest: 100 - settings.userSharePercent })}
+            </Text>
+          </View>
+
+          <SettingsRow
+            label={t('settings.household.monthlyBudget')}
+            value={`${settings.monthlyBudget.toFixed(0)} €`}
+            onPress={() => setEditing("monthlyBudget")}
+          />
+
+          <View className="flex-row items-center justify-between py-3">
+            <Text className="text-base text-gray-900">{t('settings.household.splitChildren')}</Text>
+            <Switch
+              value={settings.splitChildCosts}
+              onValueChange={(v) => save({ splitChildCosts: v })}
+              trackColor={{ false: "#d1d5db", true: ACCENT }}
+              thumbColor="#fff"
+            />
+          </View>
+        </View>
+
+        {/* Währung */}
+        <View className="bg-white rounded-2xl px-4 mb-4">
+          <Text className="text-xs font-medium uppercase text-gray-400 pt-3 mb-1">{t('settings.household.settingsSection')}</Text>
+          <SettingsRow
+            label={t('settings.household.currency')}
+            value={settings.currency}
+            onPress={() =>
+              Alert.alert(t('settings.household.currency'), t('settings.household.currencyOnlyEur'))
+            }
+          />
+        </View>
+      </ScrollView>
+
+      {/* Inline Edit Modals */}
+      {editing === "ownerName" && (
+        <EditModal
+          title={t('settings.household.yourName')}
+          initialValue={settings.ownerName}
+          onSave={(v) => save({ ownerName: v.trim() || "Ich" })}
+          onClose={() => setEditing(null)}
+        />
+      )}
+      {editing === "partnerName" && (
+        <EditModal
+          title={t('settings.household.partnerName')}
+          initialValue={settings.partnerName}
+          onSave={(v) => save({ partnerName: v.trim() || "Partner" })}
+          onClose={() => setEditing(null)}
+        />
+      )}
+      {editing === "monthlyBudget" && (
+        <EditModal
+          title={t('settings.household.monthlyBudget')}
+          initialValue={String(settings.monthlyBudget)}
+          keyboardType="decimal-pad"
+          onSave={(v) => save({ monthlyBudget: parseFloat(v.replace(",", ".")) || 400 })}
+          onClose={() => setEditing(null)}
+        />
+      )}
+    </View>
+  );
+}

apps/native/app/(app)/settings/index.tsx

@@ -0,0 +1,442 @@
+import { useAuthStore } from "@/src/stores/auth.store";
+import { signOut } from "@/src/lib/auth-client";
+import {
+  useHouseholdMembers,
+  useRevokeInvitation,
+  type PendingInvitation,
+  type HouseholdMember,
+} from "@/src/hooks/useHouseholdMembers";
+import { useHouseholdSettings, useUpdateHouseholdSettings } from "@/src/hooks/useHouseholdSettings";
+import { ModalHeader } from "@/src/components/ui/ModalHeader";
+import { useGenerateInviteCode } from "@/src/hooks/useInvite";
+import { useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "expo-router";
+import { useState, useEffect } from "react";
+import {
+  View,
+  Text,
+  Pressable,
+  ScrollView,
+  ToastAndroid,
+  Platform,
+  Alert,
+  Modal,
+  Share,
+  ActivityIndicator,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Ionicons } from "@expo/vector-icons";
+import { useTranslation } from "react-i18next";
+import i18n from "@/src/i18n";
+import * as Localization from "expo-localization";
+
+function showToast(message: string) {
+  if (Platform.OS === "android") {
+    ToastAndroid.show(message, ToastAndroid.SHORT);
+  } else {
+    Alert.alert("", message, [{ text: "OK" }], { cancelable: true });
+  }
+}
+
+// ── Invite Code Modal ──────────────────────────────────────────────────────────
+
+function InviteCodeModal({
+  visible,
+  onClose,
+}: {
+  visible: boolean;
+  onClose: () => void;
+}) {
+  const { t } = useTranslation();
+  const { mutate: generate, data, isPending, reset } = useGenerateInviteCode();
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (visible) {
+      reset();
+      setCopied(false);
+      generate();
+    }
+  }, [visible]);
+
+  const code = data?.code ?? "";
+
+  async function handleShare() {
+    if (!code) return;
+    await Share.share({ message: t('invite.shareText', { code }) });
+  }
+
+  async function handleCopy() {
+    if (!code) return;
+    await Share.share({ message: code });
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }
+
+  function handleClose() {
+    reset();
+    setCopied(false);
+    onClose();
+  }
+
+  return (
+    <Modal
+      visible={visible}
+      animationType="slide"
+      presentationStyle="pageSheet"
+      onRequestClose={handleClose}
+    >
+      <View className="flex-1 bg-white">
+        <ModalHeader
+          title={t('invite.title')}
+          onClose={handleClose}
+          closeLabel={t('common.cancel')}
+        />
+
+        <View className="flex-1 items-center justify-center px-6">
+          {isPending ? (
+            <View className="items-center gap-3">
+              <ActivityIndicator size="large" color="#2563EB" />
+              <Text className="text-sm text-gray-400">{t('invite.generating')}</Text>
+            </View>
+          ) : (
+            <>
+              {/* Code display */}
+              <View className="items-center mb-2 rounded-2xl bg-gray-50 px-8 py-6">
+                <Text
+                  style={{
+                    fontSize: 40,
+                    fontWeight: "700",
+                    letterSpacing: 10,
+                    color: "#111827",
+                  }}
+                >
+                  {code || "------"}
+                </Text>
+              </View>
+
+              <Text className="text-sm text-gray-400 mb-10">{t('invite.validFor')}</Text>
+
+              {/* Copy button */}
+              <Pressable
+                onPress={handleCopy}
+                className="w-full mb-3 flex-row items-center justify-center gap-2 rounded-xl bg-blue-600 py-4 active:opacity-80"
+              >
+                <Ionicons name="copy-outline" size={18} color="white" />
+                <Text className="text-base font-semibold text-white">
+                  {copied ? t('invite.copied') : t('invite.copyCode')}
+                </Text>
+              </Pressable>
+
+              {/* Share button */}
+              <Pressable
+                onPress={handleShare}
+                className="w-full mb-8 flex-row items-center justify-center gap-2 rounded-xl border border-blue-200 py-4 active:opacity-80"
+              >
+                <Ionicons name="share-outline" size={18} color="#2563EB" />
+                <Text className="text-base font-semibold text-blue-600">{t('invite.share')}</Text>
+              </Pressable>
+
+              {/* Regenerate link */}
+              <Pressable onPress={() => { setCopied(false); generate(); }} className="active:opacity-60">
+                <Text className="text-sm text-gray-400 underline">{t('invite.newCode')}</Text>
+              </Pressable>
+            </>
+          )}
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+// ── Members Section ────────────────────────────────────────────────────────────
+
+function MembersSection() {
+  const [showInviteModal, setShowInviteModal] = useState(false);
+  const { data, isLoading } = useHouseholdMembers();
+  const { mutate: revoke } = useRevokeInvitation();
+  const currentUserId = useAuthStore((s) => s.user?.id);
+  const { t } = useTranslation();
+
+  function handleRevoke(inv: PendingInvitation) {
+    Alert.alert(
+      t('settings.revokeTitle'),
+      t('settings.revokeMessage', { email: inv.email }),
+      [
+        { text: t('common.cancel'), style: "cancel" },
+        {
+          text: t('settings.revoke'),
+          style: "destructive",
+          onPress: () => revoke(inv.id, { onSuccess: () => showToast(t('settings.revokeSuccess')) }),
+        },
+      ],
+    );
+  }
+
+  return (
+    <>
+      <View className="mb-6 rounded-xl bg-white p-4">
+        <Text className="text-xs font-medium uppercase text-gray-400 mb-3">{t('settings.members')}</Text>
+
+        {isLoading && (
+          <ActivityIndicator size="small" color="#2563EB" style={{ marginVertical: 8 }} />
+        )}
+
+        {/* Active members */}
+        {data?.members.map((m: HouseholdMember) => (
+          <View
+            key={m.userId}
+            className="flex-row items-center justify-between py-3 border-b border-gray-100"
+          >
+            <View className="flex-row items-center gap-3">
+              <View
+                className="w-8 h-8 rounded-full items-center justify-center"
+                style={{ backgroundColor: m.userId === currentUserId ? "#2563EB" : "#e5e7eb" }}
+              >
+                <Text
+                  className="text-xs font-bold"
+                  style={{ color: m.userId === currentUserId ? "#fff" : "#6b7280" }}
+                >
+                  {m.name.charAt(0).toUpperCase()}
+                </Text>
+              </View>
+              <View>
+                <Text className="text-base text-gray-900">
+                  {m.name}{m.userId === currentUserId ? ` ${t('settings.youSuffix')}` : ""}
+                </Text>
+                <Text className="text-xs text-gray-400">{m.email}</Text>
+              </View>
+            </View>
+            <Text className="text-xs text-gray-400 capitalize">{m.role}</Text>
+          </View>
+        ))}
+
+        {/* Pending invitations */}
+        {(data?.pendingInvitations ?? []).length > 0 && (
+          <View className="mt-2">
+            <Text className="text-xs text-gray-400 mb-1">{t('settings.pending')}</Text>
+            {data!.pendingInvitations.map((inv: PendingInvitation) => (
+              <View
+                key={inv.id}
+                className="flex-row items-center justify-between py-3 border-b border-gray-100"
+              >
+                <View className="flex-row items-center gap-3">
+                  <View className="w-8 h-8 rounded-full items-center justify-center bg-gray-100">
+                    <Ionicons name="mail-outline" size={16} color="#9ca3af" />
+                  </View>
+                  <Text className="text-base text-gray-500">{inv.email}</Text>
+                </View>
+                <Pressable onPress={() => handleRevoke(inv)} className="p-1 active:opacity-50">
+                  <Ionicons name="close-circle-outline" size={20} color="#dc2626" />
+                </Pressable>
+              </View>
+            ))}
+          </View>
+        )}
+
+        {/* Invite button */}
+        <Pressable
+          onPress={() => setShowInviteModal(true)}
+          className="mt-3 flex-row items-center justify-center gap-1.5 rounded-lg border border-blue-200 py-3 active:opacity-70"
+        >
+          <Ionicons name="person-add-outline" size={16} color="#2563EB" />
+          <Text className="text-sm font-medium text-blue-600">{t('settings.invitePerson')}</Text>
+        </Pressable>
+      </View>
+
+      <InviteCodeModal visible={showInviteModal} onClose={() => setShowInviteModal(false)} />
+    </>
+  );
+}
+
+// ── Main Screen ────────────────────────────────────────────────────────────────
+
+export default function SettingsScreen() {
+  const { user, households, activeHouseholdId, setActiveHousehold } = useAuthStore();
+  const queryClient = useQueryClient();
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+  const { t } = useTranslation();
+  const { data: hhSettings } = useHouseholdSettings();
+  const { mutate: updateSettings } = useUpdateHouseholdSettings();
+
+  // Apply saved language preference when settings load
+  useEffect(() => {
+    if (hhSettings?.language && hhSettings.language !== "auto") {
+      void i18n.changeLanguage(hhSettings.language);
+    }
+  }, [hhSettings?.language]);
+
+  function handleLanguageChange() {
+    const deviceLanguage = Localization.getLocales()[0]?.languageCode ?? "de";
+    Alert.alert(t('settings.language'), undefined, [
+      {
+        text: t('settings.languageAuto'),
+        onPress: () => {
+          void i18n.changeLanguage(deviceLanguage);
+          updateSettings({ language: "auto" });
+        },
+      },
+      {
+        text: t('settings.languageDe'),
+        onPress: () => {
+          void i18n.changeLanguage("de");
+          updateSettings({ language: "de" });
+        },
+      },
+      {
+        text: t('settings.languageEn'),
+        onPress: () => {
+          void i18n.changeLanguage("en");
+          updateSettings({ language: "en" });
+        },
+      },
+      { text: t('common.cancel'), style: "cancel" },
+    ]);
+  }
+
+  async function handleSwitch(household: { id: string; name: string }) {
+    if (household.id === activeHouseholdId) return;
+    setActiveHousehold(household.id);
+    await queryClient.invalidateQueries();
+    showToast(t('settings.switchedTo', { name: household.name }));
+  }
+
+  async function handleSignOut() {
+    await signOut();
+    useAuthStore.getState().clearAuth();
+    router.replace("/(auth)/login");
+  }
+
+  return (
+    <ScrollView
+      className="flex-1 bg-gray-50"
+      contentContainerStyle={{ padding: 16, paddingTop: insets.top + 8 }}
+    >
+      {/* Back + Title */}
+      <View className="flex-row items-center mb-5">
+        <Pressable onPress={() => router.push("/(app)/mehr")} className="mr-3 p-1">
+          <Ionicons name="chevron-back" size={22} color="#374151" />
+        </Pressable>
+        <Text className="text-xl font-bold text-gray-900">{t('settings.title')}</Text>
+      </View>
+
+      {/* User Info */}
+      <View className="mb-6 rounded-xl bg-white p-4">
+        <Text className="text-xs font-medium uppercase text-gray-400 mb-2">{t('settings.account')}</Text>
+        <Text className="text-base font-semibold text-gray-900">{user?.name}</Text>
+        <Text className="text-sm text-gray-500">{user?.email}</Text>
+      </View>
+
+      {/* Household Switcher */}
+      <View className="mb-6 rounded-xl bg-white p-4">
+        <Text className="text-xs font-medium uppercase text-gray-400 mb-3">{t('settings.households')}</Text>
+        {households.map((h) => (
+          <Pressable
+            key={h.id}
+            onPress={() => handleSwitch(h)}
+            className="flex-row items-center justify-between py-3 border-b border-gray-100 active:opacity-70 last:border-b-0"
+          >
+            <View>
+              <Text className="text-base text-gray-900">{h.name}</Text>
+              <Text className="text-xs text-gray-400 capitalize">{h.role}</Text>
+            </View>
+            {activeHouseholdId === h.id && (
+              <Ionicons name="checkmark-circle" size={20} color="#2563EB" />
+            )}
+          </Pressable>
+        ))}
+        <Pressable
+          onPress={() => router.push("/(auth)/onboarding")}
+          className="mt-3 flex-row items-center justify-center gap-1.5 rounded-lg border border-blue-200 py-3 active:opacity-70"
+        >
+          <Ionicons name="add-circle-outline" size={16} color="#2563EB" />
+          <Text className="text-sm font-medium text-blue-600">{t('onboarding.createHousehold')}</Text>
+        </Pressable>
+      </View>
+
+      {/* Members + Invite */}
+      <MembersSection />
+
+      {/* Household Settings */}
+      <View className="mb-6 rounded-xl bg-white p-4">
+        <Text className="text-xs font-medium uppercase text-gray-400 mb-3">{t('tabs.household')}</Text>
+        <Pressable
+          onPress={() => router.push("/(app)/settings/household")}
+          className="flex-row items-center justify-between py-3 active:opacity-70"
+        >
+          <View className="flex-row items-center gap-3">
+            <Ionicons name="people-outline" size={20} color="#6b7280" />
+            <Text className="text-base text-gray-900">{t('settings.householdPartner')}</Text>
+          </View>
+          <Ionicons name="chevron-forward" size={16} color="#9ca3af" />
+        </Pressable>
+      </View>
+
+      {/* App Settings */}
+      <View className="mb-6 rounded-xl bg-white p-4">
+        <Text className="text-xs font-medium uppercase text-gray-400 mb-3">{t('settings.appSection')}</Text>
+        <Pressable
+          onPress={() => router.push("/(app)/settings/categories")}
+          className="flex-row items-center justify-between py-3 border-b border-gray-100 active:opacity-70"
+        >
+          <View className="flex-row items-center gap-3">
+            <Ionicons name="pricetags-outline" size={20} color="#6b7280" />
+            <Text className="text-base text-gray-900">{t('settings.categories')}</Text>
+          </View>
+          <Ionicons name="chevron-forward" size={16} color="#9ca3af" />
+        </Pressable>
+        <Pressable
+          onPress={() => router.push("/(app)/settings/fixed-costs")}
+          className="flex-row items-center justify-between py-3 border-b border-gray-100 active:opacity-70"
+        >
+          <View className="flex-row items-center gap-3">
+            <Ionicons name="repeat-outline" size={20} color="#6b7280" />
+            <Text className="text-base text-gray-900">{t('settings.fixedCosts')}</Text>
+          </View>
+          <Ionicons name="chevron-forward" size={16} color="#9ca3af" />
+        </Pressable>
+        <Pressable
+          onPress={() => router.push("/(app)/settings/transfer-line-items")}
+          className="flex-row items-center justify-between py-3 border-b border-gray-100 active:opacity-70"
+        >
+          <View className="flex-row items-center gap-3">
+            <Ionicons name="swap-horizontal-outline" size={20} color="#6b7280" />
+            <Text className="text-base text-gray-900">{t('settings.transferItems')}</Text>
+          </View>
+          <Ionicons name="chevron-forward" size={16} color="#9ca3af" />
+        </Pressable>
+        <Pressable
+          onPress={handleLanguageChange}
+          className="flex-row items-center justify-between py-3 active:opacity-70"
+        >
+          <View className="flex-row items-center gap-3">
+            <Ionicons name="language-outline" size={20} color="#6b7280" />
+            <Text className="text-base text-gray-900">{t('settings.language')}</Text>
+          </View>
+          <View className="flex-row items-center gap-1">
+            <Text className="text-sm text-gray-400">
+              {(() => {
+                switch (hhSettings?.language) {
+                  case "de": return t('settings.languageDe');
+                  case "en": return t('settings.languageEn');
+                  default: return t('settings.languageAuto');
+                }
+              })()}
+            </Text>
+            <Ionicons name="chevron-forward" size={16} color="#9ca3af" />
+          </View>
+        </Pressable>
+      </View>
+
+      {/* Sign Out */}
+      <Pressable
+        onPress={handleSignOut}
+        className="rounded-xl bg-red-50 p-4 flex-row items-center justify-center gap-2 active:opacity-70"
+      >
+        <Ionicons name="log-out-outline" size={18} color="#dc2626" />
+        <Text className="text-base font-semibold text-red-600">{t('settings.logout')}</Text>
+      </Pressable>
+    </ScrollView>
+  );
+}

apps/native/app/(app)/settings/transfer-line-items.tsx

@@ -0,0 +1,165 @@
+import { Ionicons } from "@expo/vector-icons";
+import { useState } from "react";
+import {
+  ActivityIndicator,
+  Alert,
+  Modal,
+  Pressable,
+  Text,
+  TextInput,
+  View,
+  FlatList,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useRouter } from "expo-router";
+import { useTranslation } from "react-i18next";
+import {
+  useTransferLineItems,
+  useCreateTransferLineItem,
+  useDeleteTransferLineItem,
+  type TransferLineItem,
+} from "@/src/hooks/useFixedCosts";
+import { ModalHeader } from "@/src/components/ui/ModalHeader";
+import { Numpad } from "@/src/components/ui/Numpad";
+import { formatEur } from "@/src/utils/format";
+import { handleNumpadKey, parseAmountStr } from "@/src/utils/numpad";
+
+function AddModal({ onClose }: { onClose: () => void }) {
+  const [label, setLabel] = useState("");
+  const [amountStr, setAmountStr] = useState("0");
+  const { mutate: create, isPending } = useCreateTransferLineItem();
+  const { t } = useTranslation();
+
+  function handleNumpad(key: string) {
+    setAmountStr((prev) => handleNumpadKey(prev, key));
+  }
+
+  function handleSave() {
+    const amount = parseAmountStr(amountStr);
+    if (!label.trim() || !amount || amount <= 0) return;
+    create({ label: label.trim(), amount }, { onSuccess: onClose });
+  }
+
+  const canSave = label.trim().length > 0 && parseAmountStr(amountStr) > 0;
+
+  return (
+    <Modal visible animationType="slide" presentationStyle="pageSheet" onRequestClose={onClose}>
+      <View className="flex-1 bg-white">
+        <ModalHeader
+          title={t('transferItems.addTitle')}
+          onClose={onClose}
+          closeLabel={t('common.cancel')}
+          onSave={handleSave}
+          saveLabel={t('common.save')}
+          saveDisabled={!canSave}
+          saveLoading={isPending}
+        />
+
+        <View className="items-center py-6">
+          <Text className="text-5xl font-bold text-gray-900">€ {amountStr}</Text>
+          <Text className="text-sm text-gray-400 mt-1">{t('transferItems.monthlyFixedAmount')}</Text>
+        </View>
+
+        <View className="px-4 mb-4">
+          <Text className="text-sm font-medium text-gray-700 mb-1">{t('transferItems.labelRequired')}</Text>
+          <TextInput
+            className="bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-base text-gray-900"
+            placeholder={t('transferItems.labelPlaceholder')}
+            value={label}
+            onChangeText={setLabel}
+          />
+        </View>
+
+        <Numpad onKeyPress={handleNumpad} />
+      </View>
+    </Modal>
+  );
+}
+
+export default function TransferLineItemsScreen() {
+  const insets = useSafeAreaInsets();
+  const router = useRouter();
+  const { t } = useTranslation();
+  const { data: items = [], isLoading } = useTransferLineItems();
+  const { mutate: deleteItem } = useDeleteTransferLineItem();
+  const [showAdd, setShowAdd] = useState(false);
+
+  const total = items.reduce((sum, i) => sum + i.amount, 0);
+
+  function handleDelete(item: TransferLineItem) {
+    Alert.alert(
+      t('transferItems.removeTitle'),
+      t('transferItems.removeMessage', { label: item.label }),
+      [
+        { text: t('common.cancel'), style: "cancel" },
+        { text: t('transferItems.remove'), style: "destructive", onPress: () => deleteItem(item.id) },
+      ],
+    );
+  }
+
+  return (
+    <View className="flex-1 bg-gray-50">
+      <View className="bg-white border-b border-gray-100" style={{ paddingTop: insets.top }}>
+        <View className="flex-row items-center px-4 py-3">
+          <Pressable onPress={() => router.push("/(app)/settings")} className="mr-3 p-1">
+            <Ionicons name="chevron-back" size={22} color="#374151" />
+          </Pressable>
+          <Text className="text-base font-semibold text-gray-900 flex-1">{t('transferItems.title')}</Text>
+          <Pressable
+            onPress={() => setShowAdd(true)}
+            className="flex-row items-center gap-1 px-3 py-1.5 rounded-full"
+            style={{ backgroundColor: "#dbeafe" }}
+          >
+            <Ionicons name="add" size={14} color="#2563EB" />
+            <Text className="text-xs font-semibold text-blue-600">{t('transferItems.new')}</Text>
+          </Pressable>
+        </View>
+      </View>
+
+      <Text className="text-xs text-gray-400 px-4 py-3">
+        {t('transferItems.hint')}
+      </Text>
+
+      {isLoading ? (
+        <View className="flex-1 items-center justify-center">
+          <ActivityIndicator size="large" color="#2563EB" />
+        </View>
+      ) : (
+        <FlatList
+          data={items}
+          keyExtractor={(item) => item.id}
+          renderItem={({ item }) => (
+            <View className="flex-row items-center px-4 py-3 bg-white border-b border-gray-50">
+              <View className="flex-1">
+                <Text className="text-sm font-medium text-gray-900">{item.label}</Text>
+                <Text className="text-xs text-gray-400 mt-0.5">{t('common.monthly')}</Text>
+              </View>
+              <Text className="text-sm font-semibold text-gray-800 mr-3">{formatEur(item.amount, false)}</Text>
+              <Pressable onPress={() => handleDelete(item)} hitSlop={8} className="p-1">
+                <Ionicons name="trash-outline" size={16} color="#d1d5db" />
+              </Pressable>
+            </View>
+          )}
+          ListEmptyComponent={
+            <View className="px-4 py-8 items-center">
+              <Text className="text-sm text-gray-400 text-center">
+                {t('transferItems.empty')}
+              </Text>
+            </View>
+          }
+          ListFooterComponent={
+            items.length > 0 ? (
+              <View className="flex-row items-center justify-between px-4 py-3 bg-white mt-3">
+                <Text className="text-sm font-semibold text-gray-700">{t('transferItems.totalMonthly')}</Text>
+                <Text className="text-sm font-bold text-blue-600">{formatEur(total, false)}</Text>
+              </View>
+            ) : null
+          }
+          contentContainerStyle={{ paddingBottom: insets.bottom + 24 }}
+        />
+      )}
+
+      {showAdd && <AddModal onClose={() => setShowAdd(false)} />}
+    </View>
+  );
+}

apps/native/app/(app)/shopping-list/index.tsx

@@ -0,0 +1,208 @@
+import { useShoppingList, type ShoppingItem } from "@/src/hooks/useShoppingList";
+import { Ionicons } from "@expo/vector-icons";
+import { useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  FlatList,
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+const ACCENT = "#16a34a";
+
+function StatusDot({ status }: { status: "connecting" | "connected" | "offline" }) {
+  const { t } = useTranslation();
+  if (status === "connected") {
+    return <View className="w-2 h-2 rounded-full bg-green-500" />;
+  }
+  return (
+    <View className="flex-row items-center gap-1">
+      <View className="w-2 h-2 rounded-full bg-gray-400" />
+      {status === "offline" && (
+        <Text className="text-xs text-gray-400">{t("shopping.offline")}</Text>
+      )}
+    </View>
+  );
+}
+
+function ShoppingItemRow({
+  item,
+  onToggle,
+  onDelete,
+}: {
+  item: ShoppingItem;
+  onToggle: () => void;
+  onDelete: () => void;
+}) {
+  const isChecked = item.checkedBy !== null;
+  return (
+    <View className="flex-row items-center px-4 py-3 bg-white">
+      <TouchableOpacity onPress={onToggle} className="mr-3 active:opacity-60">
+        <Ionicons
+          name={isChecked ? "checkbox" : "square-outline"}
+          size={24}
+          color={isChecked ? "#9ca3af" : ACCENT}
+        />
+      </TouchableOpacity>
+      <Text
+        className="flex-1 text-base"
+        style={{
+          color: isChecked ? "#9ca3af" : "#111827",
+          textDecorationLine: isChecked ? "line-through" : "none",
+        }}
+      >
+        {item.label}
+        {item.quantity ? (
+          <Text style={{ color: "#9ca3af", fontSize: 13 }}> {item.quantity}</Text>
+        ) : null}
+      </Text>
+      <TouchableOpacity onPress={onDelete} className="p-1 active:opacity-60">
+        <Ionicons name="trash-outline" size={18} color="#d1d5db" />
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+export default function ShoppingListScreen() {
+  const insets = useSafeAreaInsets();
+  const { t } = useTranslation();
+  const { items, status, addItem, toggleItem, deleteItem, deleteChecked } = useShoppingList();
+  const [text, setText] = useState("");
+  const [quantity, setQuantity] = useState("");
+  const inputRef = useRef<TextInput>(null);
+
+  const unchecked = items.filter((i) => i.checkedBy === null);
+  const checked = items.filter((i) => i.checkedBy !== null);
+  const sorted = [...unchecked, ...checked];
+  const hasChecked = checked.length > 0;
+
+  function handleAdd() {
+    const trimmed = text.trim();
+    if (!trimmed) return;
+    addItem(trimmed, quantity.trim() || undefined);
+    setText("");
+    setQuantity("");
+    inputRef.current?.focus();
+  }
+
+  return (
+    <KeyboardAvoidingView
+      className="flex-1 bg-gray-50"
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      keyboardVerticalOffset={0}
+    >
+      {/* Header */}
+      <View
+        style={{
+          backgroundColor: "#fff",
+          paddingTop: insets.top,
+          borderBottomWidth: 1,
+          borderBottomColor: "#f3f4f6",
+        }}
+        className="px-4 pb-3 flex-row items-center justify-between"
+      >
+        <Text className="text-xl font-bold text-gray-900">{t("shopping.title")}</Text>
+        <View className="flex-row items-center gap-2">
+          {hasChecked && (
+            <Pressable
+              onPress={deleteChecked}
+              className="rounded-full px-3 py-1 active:opacity-70"
+              style={{ backgroundColor: "#f3f4f6" }}
+            >
+              <Text className="text-xs font-medium text-gray-600">
+                {t("shopping.deleteChecked")}
+              </Text>
+            </Pressable>
+          )}
+          <StatusDot status={status} />
+        </View>
+      </View>
+
+      {/* List */}
+      <FlatList
+        data={sorted}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item, index }) => {
+          const isFirstChecked =
+            item.checkedBy !== null &&
+            (index === 0 || sorted[index - 1]?.checkedBy === null);
+          return (
+            <>
+              {isFirstChecked && unchecked.length > 0 && (
+                <View className="h-px bg-gray-200 mx-4 my-1" />
+              )}
+              <ShoppingItemRow
+                item={item}
+                onToggle={() => toggleItem(item)}
+                onDelete={() => deleteItem(item.id)}
+              />
+            </>
+          );
+        }}
+        ItemSeparatorComponent={() => <View className="h-px bg-gray-100 ml-14" />}
+        ListEmptyComponent={
+          <View className="flex-1 items-center justify-center py-24">
+            <Ionicons
+              name="cart-outline"
+              size={48}
+              color="#d1d5db"
+              style={{ marginBottom: 12 }}
+            />
+            <Text className="text-base font-medium text-gray-700 mb-1">
+              {t("shopping.empty")}
+            </Text>
+            <Text className="text-sm text-gray-400 text-center px-8">
+              {t("shopping.emptyHint")}
+            </Text>
+          </View>
+        }
+        keyboardShouldPersistTaps="handled"
+        contentContainerStyle={sorted.length === 0 ? { flex: 1 } : { paddingBottom: 8 }}
+      />
+
+      {/* Input bar */}
+      <View
+        style={{ paddingBottom: insets.bottom || 16 }}
+        className="px-4 pt-3 bg-white border-t border-gray-100"
+      >
+        <View className="flex-row items-center gap-3 mb-2">
+          <TextInput
+            ref={inputRef}
+            value={text}
+            onChangeText={setText}
+            placeholder={t("shopping.placeholder")}
+            placeholderTextColor="#9ca3af"
+            returnKeyType="done"
+            onSubmitEditing={handleAdd}
+            blurOnSubmit={false}
+            className="flex-1 text-base text-gray-900 py-2"
+          />
+          <Pressable
+            onPress={handleAdd}
+            disabled={!text.trim()}
+            style={{ backgroundColor: text.trim() ? ACCENT : "#e5e7eb" }}
+            className="w-9 h-9 rounded-full items-center justify-center active:opacity-70"
+          >
+            <Ionicons name="arrow-up" size={18} color={text.trim() ? "#fff" : "#9ca3af"} />
+          </Pressable>
+        </View>
+        <TextInput
+          value={quantity}
+          onChangeText={setQuantity}
+          placeholder={t("shopping.quantityPlaceholder")}
+          placeholderTextColor="#9ca3af"
+          returnKeyType="done"
+          onSubmitEditing={handleAdd}
+          blurOnSubmit={false}
+          className="text-sm text-gray-600 py-1"
+        />
+      </View>
+    </KeyboardAvoidingView>
+  );
+}

apps/native/app/(app)/transactions/index.tsx

@@ -0,0 +1,109 @@
+import { QuickAddModal } from "@/src/components/features/transactions/QuickAddModal";
+import { SummaryHeader } from "@/src/components/features/transactions/SummaryHeader";
+import { TransactionItem } from "@/src/components/features/transactions/TransactionItem";
+import { EditTransactionModal } from "@/src/components/features/transactions/EditTransactionModal";
+import { useTransactions, useTransactionSummary, useDeleteTransaction, type TransactionWithCategory } from "@/src/hooks/useTransactions";
+import { Ionicons } from "@expo/vector-icons";
+import { useState } from "react";
+import {
+  ActivityIndicator,
+  FlatList,
+  Pressable,
+  RefreshControl,
+  Text,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+type FilterType = "all" | "income" | "expense";
+
+export default function TransactionsScreen() {
+  const insets = useSafeAreaInsets();
+  const [filter, setFilter] = useState<FilterType>("all");
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [editTransaction, setEditTransaction] = useState<TransactionWithCategory | null>(null);
+  const { mutate: deleteTransaction } = useDeleteTransaction();
+
+  const transactionFilter = filter === "all" ? undefined : { type: filter as "income" | "expense" };
+  const { data: transactions = [], isLoading, refetch, isRefetching } = useTransactions(transactionFilter);
+  const { data: summary, isLoading: summaryLoading } = useTransactionSummary();
+
+  function renderEmpty() {
+    if (isLoading) return null;
+    return (
+      <View className="flex-1 items-center justify-center py-20">
+        <Ionicons name="wallet-outline" size={48} color="#d1d5db" style={{ marginBottom: 12 }} />
+        <Text className="text-base font-medium text-gray-700 mb-1">Noch keine Buchungen</Text>
+        <Text className="text-sm text-gray-400">Tippe auf + um deine erste Buchung einzutragen</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View className="flex-1 bg-white">
+      <View className="bg-blue-600" style={{ paddingTop: insets.top }}>
+        <SummaryHeader summary={summary} isLoading={summaryLoading} />
+      </View>
+
+      {/* Filter Bar */}
+      <View className="flex-row px-4 py-3 gap-2 border-b border-gray-100">
+        {(["all", "expense", "income"] as const).map((f) => (
+          <Pressable
+            key={f}
+            onPress={() => setFilter(f)}
+            className={`px-4 py-1.5 rounded-full ${filter === f ? "bg-blue-600" : "bg-gray-100"}`}
+          >
+            <Text className={`text-sm font-medium ${filter === f ? "text-white" : "text-gray-600"}`}>
+              {f === "all" ? "Alle" : f === "expense" ? "Ausgaben" : "Einnahmen"}
+            </Text>
+          </Pressable>
+        ))}
+      </View>
+
+      {/* Transaction List */}
+      {isLoading ? (
+        <View className="flex-1 items-center justify-center">
+          <ActivityIndicator size="large" color="#2563EB" />
+        </View>
+      ) : (
+        <FlatList
+          data={transactions}
+          keyExtractor={(item) => item.id}
+          renderItem={({ item }) => (
+            <TransactionItem
+              transaction={item}
+              onPress={setEditTransaction}
+              onDelete={(t) => deleteTransaction(t.id)}
+            />
+          )}
+          ListEmptyComponent={renderEmpty}
+          refreshControl={
+            <RefreshControl refreshing={isRefetching} onRefresh={() => void refetch()} />
+          }
+          ItemSeparatorComponent={() => <View className="h-px bg-gray-50 ml-16" />}
+          contentContainerStyle={transactions.length === 0 ? { flex: 1 } : undefined}
+        />
+      )}
+
+      {/* FAB */}
+      <Pressable
+        onPress={() => setShowAddModal(true)}
+        className="absolute bottom-6 right-6 w-14 h-14 bg-blue-600 rounded-full items-center justify-center shadow-lg active:opacity-80"
+      >
+        <Ionicons name="add" size={28} color="#fff" />
+      </Pressable>
+
+      <QuickAddModal
+        visible={showAddModal}
+        onClose={() => setShowAddModal(false)}
+        onRequestAddCategory={() => {}}
+      />
+      {editTransaction && (
+        <EditTransactionModal
+          transaction={editTransaction}
+          onClose={() => setEditTransaction(null)}
+        />
+      )}
+    </View>
+  );
+}

apps/native/app/(app)/urlaub/[id].tsx

@@ -0,0 +1,860 @@
+import { ModalHeader } from "@/src/components/ui/ModalHeader";
+import { Numpad } from "@/src/components/ui/Numpad";
+import { TAB_COLORS } from "@/src/constants/colors";
+import {
+  useTrip,
+  useTripExpenses,
+  useCreateTripExpense,
+  useDeleteTripExpense,
+  useCompleteTrip,
+  type TripExpense,
+  type TripSettlement,
+  type CreateTripExpenseInput,
+} from "@/src/hooks/useTrips";
+import { useHouseholdMembers } from "@/src/hooks/useHouseholdMembers";
+import { useAuthStore } from "@/src/stores/auth.store";
+import { formatEur } from "@/src/utils/format";
+import { todayIso } from "@/src/utils/date";
+import { handleNumpadKey, parseAmountStr } from "@/src/utils/numpad";
+import { Ionicons } from "@expo/vector-icons";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ActivityIndicator,
+  Alert,
+  FlatList,
+  Modal,
+  Pressable,
+  ScrollView,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+const ACCENT = TAB_COLORS.shopping; // green #16A34A
+
+// ── Category config ───────────────────────────────────────────────────────────
+
+type ExpenseCategory = TripExpense["category"];
+
+const CATEGORY_ICONS: Record<ExpenseCategory, React.ComponentProps<typeof Ionicons>["name"]> = {
+  unterkunft: "bed-outline",
+  essen: "restaurant-outline",
+  transport: "car-outline",
+  aktivitaeten: "ticket-outline",
+  sonstiges: "cube-outline",
+};
+
+const CATEGORY_ORDER: ExpenseCategory[] = [
+  "unterkunft",
+  "essen",
+  "transport",
+  "aktivitaeten",
+  "sonstiges",
+];
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function formatDateRange(startDate: string, endDate: string): string {
+  const fmt = (d: string) => {
+    const parts = d.split("-");
+    return `${parts[2]}.${parts[1]}.${parts[0]?.slice(2)}`;
+  };
+  return `${fmt(startDate)} – ${fmt(endDate)}`;
+}
+
+function getBudgetColor(remaining: number, budget: number): string {
+  if (remaining <= 0) return "#dc2626";
+  if (remaining < budget * 0.1) return "#ea580c";
+  return ACCENT;
+}
+
+// ── Progress Bar ──────────────────────────────────────────────────────────────
+
+function ProgressBar({
+  spent,
+  budget,
+  color,
+  height = 6,
+}: {
+  spent: number;
+  budget: number;
+  color: string;
+  height?: number;
+}) {
+  const ratio = budget > 0 ? Math.min(spent / budget, 1) : 0;
+  return (
+    <View
+      style={{ height, borderRadius: height / 2, backgroundColor: "#f3f4f6", overflow: "hidden" }}
+    >
+      <View
+        style={{
+          width: `${ratio * 100}%`,
+          height,
+          backgroundColor: color,
+          borderRadius: height / 2,
+        }}
+      />
+    </View>
+  );
+}
+
+// ── Budget Summary Card ───────────────────────────────────────────────────────
+
+function BudgetSummaryCard({
+  budget,
+  totalSpent,
+  remaining,
+}: {
+  budget: number;
+  totalSpent: number;
+  remaining: number;
+}) {
+  const { t } = useTranslation();
+  const color = getBudgetColor(remaining, budget);
+  const isOver = remaining <= 0;
+
+  return (
+    <View
+      className="mx-4 mt-4 bg-white rounded-2xl p-4"
+      style={{ borderWidth: 1, borderColor: "#f3f4f6" }}
+    >
+      <View className="flex-row justify-between mb-3">
+        <View className="flex-1 items-center">
+          <Text className="text-xs text-gray-400 mb-1">{t("trips.budget")}</Text>
+          <Text className="text-lg font-bold text-gray-900">{formatEur(budget)}</Text>
+        </View>
+        <View className="w-px bg-gray-100" />
+        <View className="flex-1 items-center">
+          <Text className="text-xs text-gray-400 mb-1">{t("trips.spent")}</Text>
+          <Text className="text-lg font-bold text-gray-700">{formatEur(totalSpent)}</Text>
+        </View>
+        <View className="w-px bg-gray-100" />
+        <View className="flex-1 items-center">
+          <Text className="text-xs text-gray-400 mb-1">{t("trips.remaining")}</Text>
+          <Text className="text-lg font-bold" style={{ color }}>
+            {isOver ? `−${formatEur(Math.abs(remaining))}` : formatEur(remaining)}
+          </Text>
+        </View>
+      </View>
+      <ProgressBar spent={totalSpent} budget={budget} color={color} height={8} />
+    </View>
+  );
+}
+
+// ── Category Section ──────────────────────────────────────────────────────────
+
+function CategorySection({
+  byCategory,
+  budget,
+}: {
+  byCategory: Record<string, number>;
+  budget: number;
+}) {
+  const { t } = useTranslation();
+  const categories = CATEGORY_ORDER.filter((cat) => (byCategory[cat] ?? 0) > 0);
+
+  if (categories.length === 0) return null;
+
+  return (
+    <View className="mx-4 mt-4 bg-white rounded-2xl overflow-hidden" style={{ borderWidth: 1, borderColor: "#f3f4f6" }}>
+      <Text className="text-xs font-semibold text-gray-400 uppercase tracking-wide px-4 pt-3 pb-2">
+        {t("trips.budget")} nach Kategorie
+      </Text>
+      {categories.map((cat, index) => {
+        const amount = byCategory[cat] ?? 0;
+        const icon = CATEGORY_ICONS[cat];
+        return (
+          <View
+            key={cat}
+            className="px-4 py-3"
+            style={index < categories.length - 1 ? { borderBottomWidth: 1, borderBottomColor: "#f9fafb" } : undefined}
+          >
+            <View className="flex-row items-center mb-1.5">
+              <View
+                className="w-7 h-7 rounded-lg items-center justify-center mr-3"
+                style={{ backgroundColor: `${ACCENT}18` }}
+              >
+                <Ionicons name={icon} size={14} color={ACCENT} />
+              </View>
+              <Text className="text-sm text-gray-700 flex-1">
+                {t(`trips.categories.${cat}`)}
+              </Text>
+              <Text className="text-sm font-semibold text-gray-800">{formatEur(amount)}</Text>
+            </View>
+            <View className="ml-10">
+              <ProgressBar spent={amount} budget={budget} color={ACCENT} height={3} />
+            </View>
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+// ── Expense Row ───────────────────────────────────────────────────────────────
+
+function ExpenseRow({
+  expense,
+  memberName,
+  onDelete,
+}: {
+  expense: TripExpense;
+  memberName: string;
+  onDelete: () => void;
+}) {
+  const { t } = useTranslation();
+  const icon = CATEGORY_ICONS[expense.category];
+
+  return (
+    <View className="flex-row items-center px-4 py-3 bg-white">
+      <View
+        className="w-9 h-9 rounded-xl items-center justify-center mr-3"
+        style={{ backgroundColor: `${ACCENT}18` }}
+      >
+        <Ionicons name={icon} size={18} color={ACCENT} />
+      </View>
+      <View className="flex-1 mr-2">
+        <Text className="text-sm font-medium text-gray-800">{expense.label}</Text>
+        <Text className="text-xs text-gray-400">
+          {t("trips.paidBy", { name: memberName })} · {expense.date}
+        </Text>
+        {expense.note && (
+          <Text className="text-xs text-gray-400 italic">{expense.note}</Text>
+        )}
+      </View>
+      <Text className="text-sm font-semibold text-gray-700 mr-3">{formatEur(expense.amount)}</Text>
+      <TouchableOpacity onPress={onDelete} className="p-1 active:opacity-60">
+        <Ionicons name="trash-outline" size={18} color="#d1d5db" />
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+// ── Closed Banner ─────────────────────────────────────────────────────────────
+
+function ClosedBanner({
+  settlementAmount,
+  settlementFromUserId,
+  settlementToUserId,
+  getMemberName,
+}: {
+  settlementAmount: number | null;
+  settlementFromUserId: string | null;
+  settlementToUserId: string | null;
+  getMemberName: (userId: string) => string;
+}) {
+  const { t } = useTranslation();
+
+  const hasSettlement =
+    settlementAmount !== null &&
+    settlementAmount > 0.01 &&
+    settlementFromUserId !== null &&
+    settlementToUserId !== null;
+
+  return (
+    <View
+      className="mx-4 mt-4 rounded-2xl px-4 py-3"
+      style={{ backgroundColor: "#dcfce7" }}
+    >
+      <View className="flex-row items-center gap-2 mb-1">
+        <Ionicons name="lock-closed" size={14} color="#15803d" />
+        <Text className="text-sm font-semibold" style={{ color: "#15803d" }}>
+          {t("trips.settlement.closedBanner")}
+        </Text>
+      </View>
+      {hasSettlement && settlementFromUserId !== null && settlementToUserId !== null ? (
+        <Text className="text-xs" style={{ color: "#166534" }}>
+          {t("trips.settlement.settledInfo", {
+            from: getMemberName(settlementFromUserId),
+            to: getMemberName(settlementToUserId),
+            amount: formatEur(settlementAmount ?? 0),
+          })}
+        </Text>
+      ) : (
+        <Text className="text-xs" style={{ color: "#166534" }}>
+          {t("trips.settlement.balanced")}
+        </Text>
+      )}
+    </View>
+  );
+}
+
+// ── Settlement Modal ──────────────────────────────────────────────────────────
+
+function SettlementModal({
+  settlement,
+  onConfirm,
+  onClose,
+  isPending,
+}: {
+  settlement: TripSettlement;
+  onConfirm: () => void;
+  onClose: () => void;
+  isPending: boolean;
+}) {
+  const { t } = useTranslation();
+  const insets = useSafeAreaInsets();
+
+  const hasSettlement = settlement.settlement !== null;
+
+  return (
+    <Modal visible animationType="slide" presentationStyle="pageSheet" onRequestClose={onClose}>
+      <View className="flex-1 bg-white" style={{ paddingBottom: insets.bottom + 16 }}>
+        {/* Header */}
+        <View
+          className="flex-row items-center justify-between px-4 py-4"
+          style={{ borderBottomWidth: 1, borderBottomColor: "#f3f4f6" }}
+        >
+          <Text className="text-lg font-bold text-gray-900">
+            {t("trips.settlement.title")}
+          </Text>
+          <Pressable onPress={onClose} className="p-1 active:opacity-70">
+            <Ionicons name="close" size={22} color="#6b7280" />
+          </Pressable>
+        </View>
+
+        <ScrollView className="flex-1" contentContainerStyle={{ padding: 16, gap: 4 }}>
+          {/* Total row */}
+          <View className="flex-row justify-between py-3">
+            <Text className="text-sm text-gray-600">{t("trips.settlement.total")}</Text>
+            <Text className="text-sm font-semibold text-gray-900">
+              {formatEur(settlement.total)}
+            </Text>
+          </View>
+
+          {/* Fair share row */}
+          <View className="flex-row justify-between py-3">
+            <Text className="text-sm text-gray-600">{t("trips.settlement.fairShare")}</Text>
+            <Text className="text-sm font-semibold text-gray-900">
+              {formatEur(settlement.fairShare)}
+            </Text>
+          </View>
+
+          {/* Divider */}
+          <View style={{ height: 1, backgroundColor: "#f3f4f6", marginVertical: 4 }} />
+
+          {/* Per-person rows */}
+          {settlement.balances.map((balance) => (
+            <View key={balance.userId} className="py-3">
+              <View className="flex-row justify-between mb-1.5">
+                <Text className="text-sm font-medium text-gray-700">{balance.name}</Text>
+                <Text className="text-sm text-gray-500">
+                  {formatEur(balance.paid)} {t("trips.settlement.paid")}
+                </Text>
+              </View>
+              <ProgressBar
+                spent={balance.paid}
+                budget={settlement.total > 0 ? settlement.total : 1}
+                color={balance.balance >= 0 ? ACCENT : "#f97316"}
+                height={4}
+              />
+            </View>
+          ))}
+
+          {/* Divider */}
+          <View style={{ height: 1, backgroundColor: "#f3f4f6", marginVertical: 4 }} />
+
+          {/* Settlement result box */}
+          <View
+            className="rounded-2xl p-4 mt-2"
+            style={{ backgroundColor: hasSettlement ? "#dbeafe" : "#dcfce7" }}
+          >
+            {hasSettlement && settlement.settlement !== null ? (
+              <>
+                <Text
+                  className="text-xs font-medium mb-1"
+                  style={{ color: hasSettlement ? "#1d4ed8" : "#15803d" }}
+                >
+                  {t("trips.settlement.owes", {
+                    from: settlement.settlement.fromName,
+                    to: settlement.settlement.toName,
+                  })}
+                </Text>
+                <Text
+                  className="text-2xl font-bold"
+                  style={{ color: hasSettlement ? "#1e40af" : "#166534" }}
+                >
+                  {formatEur(settlement.settlement.amount)}
+                </Text>
+              </>
+            ) : (
+              <View className="flex-row items-center gap-2">
+                <Ionicons name="checkmark-circle" size={18} color="#15803d" />
+                <Text className="text-sm font-medium" style={{ color: "#15803d" }}>
+                  {t("trips.settlement.balanced")}
+                </Text>
+              </View>
+            )}
+          </View>
+
+          <View className="h-4" />
+
+          {/* Confirm button */}
+          <Pressable
+            onPress={onConfirm}
+            disabled={isPending}
+            className="rounded-2xl py-4 items-center active:opacity-80"
+            style={{ backgroundColor: ACCENT }}
+          >
+            {isPending ? (
+              <ActivityIndicator size="small" color="#fff" />
+            ) : (
+              <Text className="text-base font-semibold text-white">
+                {t("trips.settlement.closeTrip")}
+              </Text>
+            )}
+          </Pressable>
+
+          {/* Cancel text button */}
+          <Pressable onPress={onClose} className="py-3 items-center active:opacity-70">
+            <Text className="text-sm text-gray-500">{t("common.cancel")}</Text>
+          </Pressable>
+        </ScrollView>
+      </View>
+    </Modal>
+  );
+}
+
+// ── Add Expense Modal ─────────────────────────────────────────────────────────
+
+function AddExpenseModal({
+  tripId,
+  onClose,
+}: {
+  tripId: string;
+  onClose: () => void;
+}) {
+  const { t } = useTranslation();
+  const userId = useAuthStore((s) => s.user?.id ?? "");
+  const { data: membersData } = useHouseholdMembers();
+  const members = membersData?.members ?? [];
+  const { mutate: createExpense, isPending } = useCreateTripExpense(tripId);
+
+  const [label, setLabel] = useState("");
+  const [amountStr, setAmountStr] = useState("0");
+  const [category, setCategory] = useState<ExpenseCategory>("sonstiges");
+  const [paidBy, setPaidBy] = useState(userId);
+  const [date, setDate] = useState(todayIso());
+  const [note, setNote] = useState("");
+
+  function handleNumpadKey_(key: string) {
+    setAmountStr((prev) => handleNumpadKey(prev, key));
+  }
+
+  const amount = parseAmountStr(amountStr);
+  const canSave = label.trim().length > 0 && amount > 0 && date.length === 10;
+
+  function handleSave() {
+    if (!canSave) return;
+
+    const input: CreateTripExpenseInput = {
+      label: label.trim(),
+      amount,
+      category,
+      paidBy,
+      date,
+      ...(note.trim() ? { note: note.trim() } : {}),
+    };
+
+    createExpense(input, { onSuccess: onClose });
+  }
+
+  return (
+    <Modal visible animationType="slide" presentationStyle="pageSheet" onRequestClose={onClose}>
+      <View className="flex-1 bg-white">
+        <ModalHeader
+          title={t("trips.newExpense")}
+          onClose={onClose}
+          closeLabel={t("common.cancel")}
+          onSave={handleSave}
+          saveLabel={t("common.save")}
+          saveDisabled={!canSave}
+          saveLoading={isPending}
+          saveColor={ACCENT}
+        />
+
+        <ScrollView className="flex-1" keyboardShouldPersistTaps="handled">
+          {/* Amount display */}
+          <View className="items-center py-5">
+            <Text className="text-5xl font-bold text-gray-900">€ {amountStr}</Text>
+            <Text className="text-xs text-gray-400 mt-1">{t("trips.spent")}</Text>
+          </View>
+
+          {/* Numpad */}
+          <Numpad onKeyPress={handleNumpadKey_} />
+
+          {/* Fields */}
+          <View className="px-4 mt-4 gap-3">
+            {/* Label */}
+            <TextInput
+              className="bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-base text-gray-900"
+              placeholder={t("trips.label")}
+              placeholderTextColor="#9ca3af"
+              value={label}
+              onChangeText={setLabel}
+            />
+
+            {/* Category chips */}
+            <ScrollView horizontal showsHorizontalScrollIndicator={false} className="-mx-4 px-4">
+              <View className="flex-row gap-2">
+                {CATEGORY_ORDER.map((cat) => {
+                  const selected = category === cat;
+                  return (
+                    <Pressable
+                      key={cat}
+                      onPress={() => setCategory(cat)}
+                      className="flex-row items-center gap-1.5 px-3 py-2 rounded-full"
+                      style={{
+                        backgroundColor: selected ? ACCENT : "#f3f4f6",
+                      }}
+                    >
+                      <Ionicons
+                        name={CATEGORY_ICONS[cat]}
+                        size={14}
+                        color={selected ? "#fff" : "#6b7280"}
+                      />
+                      <Text
+                        className="text-xs font-medium"
+                        style={{ color: selected ? "#fff" : "#4b5563" }}
+                      >
+                        {t(`trips.categories.${cat}`)}
+                      </Text>
+                    </Pressable>
+                  );
+                })}
+              </View>
+            </ScrollView>
+
+            {/* Paid by */}
+            {members.length > 1 && (
+              <View className="flex-row gap-2">
+                {members.map((m) => {
+                  const selected = paidBy === m.userId;
+                  return (
+                    <Pressable
+                      key={m.userId}
+                      onPress={() => setPaidBy(m.userId)}
+                      className="flex-1 py-2.5 rounded-xl items-center"
+                      style={{
+                        backgroundColor: selected ? ACCENT : "#f3f4f6",
+                      }}
+                    >
+                      <Text
+                        className="text-sm font-medium"
+                        style={{ color: selected ? "#fff" : "#4b5563" }}
+                      >
+                        {m.name}
+                      </Text>
+                    </Pressable>
+                  );
+                })}
+              </View>
+            )}
+
+            {/* Date */}
+            <TextInput
+              className="bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-base text-gray-900"
+              placeholder="YYYY-MM-DD"
+              placeholderTextColor="#9ca3af"
+              value={date}
+              onChangeText={setDate}
+              keyboardType="numbers-and-punctuation"
+              maxLength={10}
+            />
+
+            {/* Note */}
+            <TextInput
+              className="bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-base text-gray-900"
+              placeholder={t("trips.note")}
+              placeholderTextColor="#9ca3af"
+              value={note}
+              onChangeText={setNote}
+            />
+          </View>
+
+          <View className="h-8" />
+        </ScrollView>
+      </View>
+    </Modal>
+  );
+}
+
+// ── Main Detail Screen ────────────────────────────────────────────────────────
+
+export default function TripDetailScreen() {
+  const insets = useSafeAreaInsets();
+  const router = useRouter();
+  const { t } = useTranslation();
+  const { id } = useLocalSearchParams<{ id: string }>();
+
+  const { data: summary, isLoading: summaryLoading } = useTrip(id);
+  const { data: expenses = [], isLoading: expensesLoading } = useTripExpenses(id);
+  const { data: membersData } = useHouseholdMembers();
+  const { mutate: deleteExpense } = useDeleteTripExpense(id);
+  const { mutate: completeTrip, isPending: completing } = useCompleteTrip();
+
+  const [showAddExpense, setShowAddExpense] = useState(false);
+  const [showSettlementModal, setShowSettlementModal] = useState(false);
+  const [settlementPreview, setSettlementPreview] = useState<TripSettlement | null>(null);
+  const [isLoadingSettlement, setIsLoadingSettlement] = useState(false);
+
+  const members = membersData?.members ?? [];
+
+  function getMemberName(userId: string): string {
+    return members.find((m) => m.userId === userId)?.name ?? userId;
+  }
+
+  function handleDeleteExpense(expenseId: string) {
+    Alert.alert(
+      t("common.delete"),
+      t("common.confirm") + "?",
+      [
+        { text: t("common.cancel"), style: "cancel" },
+        {
+          text: t("common.delete"),
+          style: "destructive",
+          onPress: () => deleteExpense(expenseId),
+        },
+      ],
+    );
+  }
+
+  async function handleComplete() {
+    if (!summary) return;
+
+    if (expenses.length === 0) {
+      Alert.alert(
+        t("trips.settlement.title"),
+        t("trips.settlement.noExpenses"),
+      );
+      return;
+    }
+
+    setIsLoadingSettlement(true);
+    try {
+      const { apiRequest } = await import("@/src/lib/api-client");
+      const result = await apiRequest<{ settlement: TripSettlement }>(
+        `/api/trips/${id}/settlement`,
+      );
+      setSettlementPreview(result.settlement);
+      setShowSettlementModal(true);
+    } catch {
+      Alert.alert(t("common.error"), t("common.error"));
+    } finally {
+      setIsLoadingSettlement(false);
+    }
+  }
+
+  function handleConfirmComplete() {
+    completeTrip(id, {
+      onSuccess: () => {
+        setShowSettlementModal(false);
+        router.back();
+      },
+    });
+  }
+
+  if (summaryLoading) {
+    return (
+      <View className="flex-1 bg-gray-50 items-center justify-center">
+        <ActivityIndicator size="large" color={ACCENT} />
+      </View>
+    );
+  }
+
+  if (!summary) {
+    return (
+      <View className="flex-1 bg-gray-50 items-center justify-center">
+        <Text className="text-gray-400">Nicht gefunden</Text>
+      </View>
+    );
+  }
+
+  const { trip, totalSpent, remaining, byCategory } = summary;
+  const isActive = trip.status === "active";
+
+  type ListSection =
+    | { key: "closed-banner" }
+    | { key: "budget" }
+    | { key: "category" }
+    | { key: "expense-header" }
+    | { key: `expense-${string}`; expense: TripExpense };
+
+  const sections: ListSection[] = [];
+
+  if (!isActive) {
+    sections.push({ key: "closed-banner" });
+  }
+
+  sections.push(
+    { key: "budget" },
+    { key: "category" },
+    { key: "expense-header" },
+    ...expenses.map(
+      (e): ListSection => ({ key: `expense-${e.id}`, expense: e }),
+    ),
+  );
+
+  function renderSection({ item }: { item: ListSection }) {
+    if (item.key === "closed-banner") {
+      return (
+        <ClosedBanner
+          settlementAmount={trip.settlementAmount}
+          settlementFromUserId={trip.settlementFromUserId}
+          settlementToUserId={trip.settlementToUserId}
+          getMemberName={getMemberName}
+        />
+      );
+    }
+
+    if (item.key === "budget") {
+      return (
+        <BudgetSummaryCard
+          budget={trip.budget}
+          totalSpent={totalSpent}
+          remaining={remaining}
+        />
+      );
+    }
+
+    if (item.key === "category") {
+      return <CategorySection byCategory={byCategory} budget={trip.budget} />;
+    }
+
+    if (item.key === "expense-header") {
+      return (
+        <View className="flex-row items-center justify-between px-4 pt-5 pb-2">
+          <Text className="text-xs font-semibold text-gray-400 uppercase tracking-wide">
+            Ausgaben
+          </Text>
+          {isActive && (
+            <Pressable
+              onPress={() => setShowAddExpense(true)}
+              className="flex-row items-center gap-1 px-3 py-1.5 rounded-full active:opacity-70"
+              style={{ backgroundColor: ACCENT }}
+            >
+              <Ionicons name="add" size={14} color="#fff" />
+              <Text className="text-xs font-semibold text-white">{t("trips.newExpense")}</Text>
+            </Pressable>
+          )}
+        </View>
+      );
+    }
+
+    if (item.key.startsWith("expense-") && "expense" in item) {
+      return (
+        <View
+          className="mx-4 bg-white rounded-xl mb-2"
+          style={{ borderWidth: 1, borderColor: "#f3f4f6" }}
+        >
+          <ExpenseRow
+            expense={item.expense}
+            memberName={getMemberName(item.expense.paidBy)}
+            onDelete={() => handleDeleteExpense(item.expense.id)}
+          />
+        </View>
+      );
+    }
+
+    return null;
+  }
+
+  const completeDisabled = completing || isLoadingSettlement || expenses.length === 0;
+
+  return (
+    <View className="flex-1 bg-gray-50">
+      {/* Header */}
+      <View
+        style={{
+          backgroundColor: "#fff",
+          paddingTop: insets.top + 12,
+          borderBottomWidth: 1,
+          borderBottomColor: "#f3f4f6",
+        }}
+        className="px-4 pb-3 flex-row items-center"
+      >
+        <Pressable onPress={() => router.back()} className="mr-3 p-1">
+          <Ionicons name="chevron-back" size={22} color="#374151" />
+        </Pressable>
+        <View className="flex-1">
+          <Text className="text-base font-bold text-gray-900">{trip.name}</Text>
+          <Text className="text-xs text-gray-400">
+            {trip.destination ? `${trip.destination} · ` : ""}
+            {formatDateRange(trip.startDate, trip.endDate)}
+          </Text>
+        </View>
+
+        {isActive && (
+          <Pressable
+            onPress={() => void handleComplete()}
+            disabled={completeDisabled}
+            className="flex-row items-center gap-1.5 px-3 py-2 rounded-xl active:opacity-70"
+            style={{
+              backgroundColor: completeDisabled ? "#e5e7eb" : "#f3f4f6",
+            }}
+          >
+            {completing || isLoadingSettlement ? (
+              <ActivityIndicator size="small" color="#6b7280" />
+            ) : (
+              <>
+                <Ionicons
+                  name="checkmark-circle-outline"
+                  size={16}
+                  color={expenses.length === 0 ? "#d1d5db" : "#6b7280"}
+                />
+                <Text
+                  className="text-xs font-semibold"
+                  style={{ color: expenses.length === 0 ? "#d1d5db" : "#6b7280" }}
+                >
+                  {t("trips.complete")}
+                </Text>
+              </>
+            )}
+          </Pressable>
+        )}
+      </View>
+
+      {expensesLoading ? (
+        <View className="flex-1 items-center justify-center">
+          <ActivityIndicator size="large" color={ACCENT} />
+        </View>
+      ) : (
+        <FlatList
+          data={sections}
+          keyExtractor={(item) => item.key}
+          renderItem={renderSection}
+          contentContainerStyle={{ paddingBottom: insets.bottom + 80 }}
+          ListEmptyComponent={null}
+        />
+      )}
+
+      {/* FAB */}
+      {isActive && (
+        <Pressable
+          onPress={() => setShowAddExpense(true)}
+          style={{ backgroundColor: ACCENT, bottom: insets.bottom + 20 }}
+          className="absolute right-6 w-14 h-14 rounded-full items-center justify-center shadow-lg active:opacity-80"
+        >
+          <Ionicons name="add" size={28} color="#fff" />
+        </Pressable>
+      )}
+
+      {showAddExpense && (
+        <AddExpenseModal tripId={id} onClose={() => setShowAddExpense(false)} />
+      )}
+
+      {showSettlementModal && settlementPreview !== null && (
+        <SettlementModal
+          settlement={settlementPreview}
+          onConfirm={handleConfirmComplete}
+          onClose={() => setShowSettlementModal(false)}
+          isPending={completing}
+        />
+      )}
+    </View>
+  );
+}

apps/native/app/(app)/urlaub/index.tsx

@@ -0,0 +1,427 @@
+import { EmptyState } from "@/src/components/ui/EmptyState";
+import { ModalHeader } from "@/src/components/ui/ModalHeader";
+import { TAB_COLORS } from "@/src/constants/colors";
+import {
+  useTrips,
+  useCreateTrip,
+  type Trip,
+  type CreateTripInput,
+} from "@/src/hooks/useTrips";
+import { formatEur } from "@/src/utils/format";
+import { Ionicons } from "@expo/vector-icons";
+import { useRouter } from "expo-router";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ActivityIndicator,
+  FlatList,
+  Modal,
+  Pressable,
+  ScrollView,
+  Text,
+  TextInput,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+const ACCENT = TAB_COLORS.shopping; // green #16A34A
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function formatDateRange(startDate: string, endDate: string): string {
+  const fmt = (d: string) => {
+    const parts = d.split("-");
+    return `${parts[2]}.${parts[1]}.${parts[0]?.slice(2)}`;
+  };
+  return `${fmt(startDate)} – ${fmt(endDate)}`;
+}
+
+function getBudgetColor(remaining: number, budget: number): string {
+  if (remaining <= 0) return "#dc2626"; // red
+  if (remaining < budget * 0.1) return "#ea580c"; // orange
+  return ACCENT; // green
+}
+
+// ── Progress Bar ──────────────────────────────────────────────────────────────
+
+function ProgressBar({
+  spent,
+  budget,
+  color,
+}: {
+  spent: number;
+  budget: number;
+  color: string;
+}) {
+  const ratio = budget > 0 ? Math.min(spent / budget, 1) : 0;
+  return (
+    <View className="h-1.5 bg-gray-100 rounded-full overflow-hidden mt-2">
+      <View
+        style={{ width: `${ratio * 100}%`, backgroundColor: color }}
+        className="h-full rounded-full"
+      />
+    </View>
+  );
+}
+
+// ── Active Trip Card ──────────────────────────────────────────────────────────
+
+function ActiveTripCard({ trip, onPress }: { trip: Trip; onPress: () => void }) {
+  const { t } = useTranslation();
+  const remaining = trip.budget - trip.spent;
+  const color = getBudgetColor(remaining, trip.budget);
+  const isOver = remaining <= 0;
+
+  return (
+    <Pressable
+      onPress={onPress}
+      className="mx-4 mb-3 bg-white rounded-2xl p-4 active:opacity-80"
+      style={{ borderWidth: 1, borderColor: "#f3f4f6" }}
+    >
+      <View className="flex-row items-start justify-between mb-1">
+        <View className="flex-1 mr-2">
+          <Text className="text-base font-semibold text-gray-900">{trip.name}</Text>
+          {trip.destination && (
+            <Text className="text-xs text-gray-400 mt-0.5">{trip.destination}</Text>
+          )}
+        </View>
+        <View
+          className="px-2 py-0.5 rounded-full"
+          style={{ backgroundColor: `${ACCENT}18` }}
+        >
+          <Text className="text-xs font-medium" style={{ color: ACCENT }}>
+            {t("trips.active")}
+          </Text>
+        </View>
+      </View>
+
+      <Text className="text-xs text-gray-400 mb-2">
+        {formatDateRange(trip.startDate, trip.endDate)}
+      </Text>
+
+      <ProgressBar spent={trip.spent} budget={trip.budget} color={color} />
+
+      <View className="flex-row justify-between mt-2">
+        <Text className="text-xs text-gray-400">
+          {t("trips.spent")}: {formatEur(trip.spent)}
+        </Text>
+        {isOver ? (
+          <Text className="text-xs font-semibold" style={{ color: "#dc2626" }}>
+            {t("trips.overBudget", { amount: formatEur(Math.abs(remaining)) })}
+          </Text>
+        ) : (
+          <Text className="text-xs font-semibold" style={{ color }}>
+            {t("trips.remaining")}: {formatEur(remaining)}
+          </Text>
+        )}
+      </View>
+
+      <View className="flex-row justify-between mt-1">
+        <Text className="text-xs text-gray-300">{t("trips.budget")}: {formatEur(trip.budget)}</Text>
+      </View>
+    </Pressable>
+  );
+}
+
+// ── Past Trip Row ─────────────────────────────────────────────────────────────
+
+function PastTripRow({ trip, onPress }: { trip: Trip; onPress: () => void }) {
+  const { t } = useTranslation();
+
+  const hasSettlement =
+    trip.settlementAmount !== null && trip.settlementAmount > 0.01;
+  const isBalanced =
+    trip.settlementAmount !== null && trip.settlementAmount <= 0.01;
+
+  return (
+    <Pressable
+      onPress={onPress}
+      className="flex-row items-center px-4 py-3 bg-white active:opacity-80"
+      style={{ borderBottomWidth: 1, borderBottomColor: "#f9fafb" }}
+    >
+      <View className="flex-1">
+        <Text className="text-sm font-medium text-gray-700">{trip.name}</Text>
+        {trip.destination && (
+          <Text className="text-xs text-gray-400">{trip.destination}</Text>
+        )}
+        {hasSettlement && (
+          <Text className="text-xs text-gray-400 mt-0.5">
+            {t("trips.settlement.closedBanner")} · {formatEur(trip.settlementAmount ?? 0)}
+          </Text>
+        )}
+        {isBalanced && (
+          <Text className="text-xs mt-0.5" style={{ color: "#16a34a" }}>
+            {t("trips.settlement.balanced")}
+          </Text>
+        )}
+      </View>
+      <View className="items-end mr-3">
+        <Text className="text-sm font-semibold text-gray-600">{formatEur(trip.spent)}</Text>
+        <Text className="text-xs text-gray-400">{formatDateRange(trip.startDate, trip.endDate)}</Text>
+      </View>
+      <View
+        className="px-2 py-0.5 rounded-full"
+        style={{ backgroundColor: "#f3f4f6" }}
+      >
+        <Text className="text-xs text-gray-500">{t("trips.completed")}</Text>
+      </View>
+    </Pressable>
+  );
+}
+
+// ── Create Trip Modal ─────────────────────────────────────────────────────────
+
+function CreateTripModal({ onClose }: { onClose: () => void }) {
+  const { t } = useTranslation();
+  const { mutate: createTrip, isPending } = useCreateTrip();
+
+  const [name, setName] = useState("");
+  const [destination, setDestination] = useState("");
+  const [budgetStr, setBudgetStr] = useState("");
+  const [startDate, setStartDate] = useState("");
+  const [endDate, setEndDate] = useState("");
+
+  const canSave =
+    name.trim().length > 0 &&
+    parseFloat(budgetStr.replace(",", ".")) > 0 &&
+    startDate.length === 10 &&
+    endDate.length === 10;
+
+  function handleSave() {
+    const budget = parseFloat(budgetStr.replace(",", "."));
+    if (!canSave || isNaN(budget)) return;
+
+    const input: CreateTripInput = {
+      name: name.trim(),
+      budget,
+      startDate,
+      endDate,
+      ...(destination.trim() ? { destination: destination.trim() } : {}),
+    };
+
+    createTrip(input, { onSuccess: onClose });
+  }
+
+  return (
+    <Modal visible animationType="slide" presentationStyle="pageSheet" onRequestClose={onClose}>
+      <View className="flex-1 bg-white">
+        <ModalHeader
+          title={t("trips.new")}
+          onClose={onClose}
+          closeLabel={t("common.cancel")}
+          onSave={handleSave}
+          saveLabel={t("common.create")}
+          saveDisabled={!canSave}
+          saveLoading={isPending}
+          saveColor={ACCENT}
+        />
+
+        <ScrollView className="flex-1 px-4 pt-4" keyboardShouldPersistTaps="handled">
+          {/* Name */}
+          <Text className="text-xs font-medium text-gray-500 mb-1 uppercase tracking-wide">
+            {t("trips.name")} *
+          </Text>
+          <TextInput
+            className="bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-base text-gray-900 mb-4"
+            placeholder="z.B. Sommerurlaub Italien"
+            placeholderTextColor="#9ca3af"
+            value={name}
+            onChangeText={setName}
+            autoFocus
+          />
+
+          {/* Destination */}
+          <Text className="text-xs font-medium text-gray-500 mb-1 uppercase tracking-wide">
+            {t("trips.destination")}
+          </Text>
+          <TextInput
+            className="bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-base text-gray-900 mb-4"
+            placeholder="z.B. Rom, Italien"
+            placeholderTextColor="#9ca3af"
+            value={destination}
+            onChangeText={setDestination}
+          />
+
+          {/* Budget */}
+          <Text className="text-xs font-medium text-gray-500 mb-1 uppercase tracking-wide">
+            {t("trips.budget")} (€) *
+          </Text>
+          <TextInput
+            className="bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-base text-gray-900 mb-4"
+            placeholder="z.B. 2000"
+            placeholderTextColor="#9ca3af"
+            value={budgetStr}
+            onChangeText={setBudgetStr}
+            keyboardType="decimal-pad"
+          />
+
+          {/* Start Date */}
+          <Text className="text-xs font-medium text-gray-500 mb-1 uppercase tracking-wide">
+            {t("trips.startDate")} *
+          </Text>
+          <TextInput
+            className="bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-base text-gray-900 mb-4"
+            placeholder="YYYY-MM-DD"
+            placeholderTextColor="#9ca3af"
+            value={startDate}
+            onChangeText={setStartDate}
+            keyboardType="numbers-and-punctuation"
+            maxLength={10}
+          />
+
+          {/* End Date */}
+          <Text className="text-xs font-medium text-gray-500 mb-1 uppercase tracking-wide">
+            {t("trips.endDate")} *
+          </Text>
+          <TextInput
+            className="bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-base text-gray-900 mb-4"
+            placeholder="YYYY-MM-DD"
+            placeholderTextColor="#9ca3af"
+            value={endDate}
+            onChangeText={setEndDate}
+            keyboardType="numbers-and-punctuation"
+            maxLength={10}
+          />
+        </ScrollView>
+      </View>
+    </Modal>
+  );
+}
+
+// ── Main Screen ───────────────────────────────────────────────────────────────
+
+type SectionItem =
+  | { type: "header"; label: string }
+  | { type: "active-trip"; trip: Trip }
+  | { type: "past-trip"; trip: Trip }
+  | { type: "empty" };
+
+export default function UrlaubScreen() {
+  const insets = useSafeAreaInsets();
+  const router = useRouter();
+  const { t } = useTranslation();
+  const { data: trips = [], isLoading, refetch, isRefetching } = useTrips();
+  const [showCreate, setShowCreate] = useState(false);
+
+  const activeTrips = trips.filter((t) => t.status === "active");
+  const pastTrips = trips.filter((t) => t.status === "completed");
+
+  // Build flat list items for sectioned rendering
+  const listItems: SectionItem[] = [];
+
+  if (activeTrips.length > 0) {
+    listItems.push({ type: "header", label: t("trips.active") });
+    activeTrips.forEach((trip) => listItems.push({ type: "active-trip", trip }));
+  }
+
+  if (pastTrips.length > 0) {
+    listItems.push({ type: "header", label: t("trips.past") });
+    pastTrips.forEach((trip) => listItems.push({ type: "past-trip", trip }));
+  }
+
+  if (trips.length === 0 && !isLoading) {
+    listItems.push({ type: "empty" });
+  }
+
+  function renderItem({ item }: { item: SectionItem }) {
+    if (item.type === "header") {
+      return (
+        <Text className="text-xs font-semibold text-gray-400 uppercase tracking-wide px-4 pt-4 pb-2">
+          {item.label}
+        </Text>
+      );
+    }
+
+    if (item.type === "active-trip") {
+      return (
+        <ActiveTripCard
+          trip={item.trip}
+          onPress={() =>
+            router.push({
+              pathname: "/(app)/urlaub/[id]",
+              params: { id: item.trip.id },
+            })
+          }
+        />
+      );
+    }
+
+    if (item.type === "past-trip") {
+      return (
+        <PastTripRow
+          trip={item.trip}
+          onPress={() =>
+            router.push({
+              pathname: "/(app)/urlaub/[id]",
+              params: { id: item.trip.id },
+            })
+          }
+        />
+      );
+    }
+
+    // empty state
+    return (
+      <EmptyState
+        icon="airplane-outline"
+        title={t("trips.noTrips")}
+        subtitle={t("trips.noTripsHint")}
+      />
+    );
+  }
+
+  return (
+    <View className="flex-1 bg-gray-50">
+      {/* Header */}
+      <View
+        style={{
+          backgroundColor: "#fff",
+          paddingTop: insets.top + 12,
+          borderBottomWidth: 1,
+          borderBottomColor: "#f3f4f6",
+        }}
+        className="px-4 pb-3 flex-row items-center justify-between"
+      >
+        <View className="flex-row items-center gap-2">
+          <Pressable onPress={() => router.push("/(app)/mehr")} className="mr-1 p-1">
+            <Ionicons name="chevron-back" size={22} color="#374151" />
+          </Pressable>
+          <Text className="text-xl font-bold text-gray-900">{t("trips.title")}</Text>
+        </View>
+        <Pressable
+          onPress={() => setShowCreate(true)}
+          className="w-9 h-9 rounded-full items-center justify-center active:opacity-70"
+          style={{ backgroundColor: ACCENT }}
+        >
+          <Ionicons name="add" size={22} color="#fff" />
+        </Pressable>
+      </View>
+
+      {isLoading ? (
+        <View className="flex-1 items-center justify-center">
+          <ActivityIndicator size="large" color={ACCENT} />
+        </View>
+      ) : (
+        <FlatList
+          data={listItems}
+          keyExtractor={(item, index) => {
+            if (item.type === "header") return `header-${item.label}`;
+            if (item.type === "active-trip" || item.type === "past-trip")
+              return item.trip.id;
+            return `empty-${index}`;
+          }}
+          renderItem={renderItem}
+          contentContainerStyle={
+            trips.length === 0
+              ? { flex: 1, paddingBottom: insets.bottom + 16 }
+              : { paddingBottom: insets.bottom + 16, paddingTop: 4 }
+          }
+          refreshing={isRefetching}
+          onRefresh={() => void refetch()}
+        />
+      )}
+
+      {showCreate && <CreateTripModal onClose={() => setShowCreate(false)} />}
+    </View>
+  );
+}

apps/native/app/(auth)/_layout.tsx

@@ -0,0 +1,14 @@
+import { Stack } from "expo-router";
+
+export default function AuthLayout() {
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="login" />
+      <Stack.Screen name="register" />
+      <Stack.Screen name="onboarding" />
+      <Stack.Screen name="setup" />
+      <Stack.Screen name="forgot-password" />
+      <Stack.Screen name="reset-password" />
+    </Stack>
+  );
+}

apps/native/app/(auth)/forgot-password.tsx

@@ -0,0 +1,100 @@
+import { Ionicons } from "@expo/vector-icons";
+import { useRouter } from "expo-router";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  Text,
+  TextInput,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { authClient } from "@/src/lib/auth-client";
+
+export default function ForgotPasswordScreen() {
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+  const { t } = useTranslation();
+  const [email, setEmail] = useState("");
+  const [isPending, setIsPending] = useState(false);
+  const [sent, setSent] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSend() {
+    if (!email.trim()) return;
+    setIsPending(true);
+    setError(null);
+    const result = await authClient.requestPasswordReset({
+      email: email.trim(),
+      redirectTo: "haushaltsApp://reset-password",
+    });
+    setIsPending(false);
+    if (result.error) {
+      setError(result.error.message ?? t('common.error'));
+    } else {
+      setSent(true);
+    }
+  }
+
+  return (
+    <KeyboardAvoidingView
+      className="flex-1 bg-white"
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+    >
+      <View style={{ paddingTop: insets.top }} className="px-6 pt-4 pb-2 flex-row items-center">
+        <Pressable onPress={() => router.back()} className="p-1 mr-2 active:opacity-50">
+          <Ionicons name="chevron-back" size={22} color="#374151" />
+        </Pressable>
+      </View>
+
+      <View className="flex-1 px-6 pt-8">
+        <Text className="text-2xl font-bold text-gray-900 mb-2">{t('forgotPassword.title')}</Text>
+        <Text className="text-sm text-gray-500 mb-8">{t('forgotPassword.subtitle')}</Text>
+
+        {sent ? (
+          <View className="bg-green-50 rounded-2xl p-5 items-center" style={{ borderWidth: 1, borderColor: "#bbf7d0" }}>
+            <Ionicons name="checkmark-circle" size={48} color="#16a34a" style={{ marginBottom: 12 }} />
+            <Text className="text-base font-semibold text-green-800 text-center mb-1">{t('forgotPassword.sentTitle')}</Text>
+            <Text className="text-sm text-green-600 text-center">{t('forgotPassword.sentHint')}</Text>
+          </View>
+        ) : (
+          <>
+            <Text className="text-sm font-medium text-gray-700 mb-2">{t('login.emailLabel')}</Text>
+            <TextInput
+              className="bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-base text-gray-900 mb-4"
+              placeholder={t('login.emailPlaceholder')}
+              placeholderTextColor="#9ca3af"
+              value={email}
+              onChangeText={setEmail}
+              keyboardType="email-address"
+              autoCapitalize="none"
+              autoComplete="email"
+            />
+
+            {error && (
+              <Text className="text-sm text-red-500 mb-4">{error}</Text>
+            )}
+
+            <Pressable
+              onPress={handleSend}
+              disabled={isPending || !email.trim()}
+              className="rounded-2xl py-4 items-center active:opacity-80"
+              style={{ backgroundColor: isPending || !email.trim() ? "#e5e7eb" : "#2563EB" }}
+            >
+              {isPending ? (
+                <ActivityIndicator color="#fff" />
+              ) : (
+                <Text className="text-base font-semibold" style={{ color: !email.trim() ? "#9ca3af" : "#fff" }}>
+                  {t('forgotPassword.sendButton')}
+                </Text>
+              )}
+            </Pressable>
+          </>
+        )}
+      </View>
+    </KeyboardAvoidingView>
+  );
+}

apps/native/app/(auth)/login.tsx

@@ -0,0 +1,182 @@
+import { signIn, authClient } from "@/src/lib/auth-client";
+import { apiRequest } from "@/src/lib/api-client";
+import { useAuthStore, type Household } from "@/src/stores/auth.store";
+import { useRouter } from "expo-router";
+import { useState } from "react";
+import * as AppleAuthentication from "expo-apple-authentication";
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  Text,
+  TextInput,
+  View,
+} from "react-native";
+import { useTranslation } from "react-i18next";
+
+export default function LoginScreen() {
+  const router = useRouter();
+  const { t } = useTranslation();
+  const { setUser, setHouseholds, setActiveHousehold } = useAuthStore();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleEmailSignIn() {
+    if (!email || !password) {
+      setError(t('login.fillAllFields'));
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = await signIn.email({ email, password });
+      if (result.error) {
+        const msg = result.error.message ?? "";
+        if (msg.toLowerCase().includes("email") && msg.toLowerCase().includes("verif")) {
+          router.push({ pathname: "/(auth)/verify-email", params: { email } });
+          return;
+        }
+        setError(msg || t('login.signInError'));
+        return;
+      }
+      if (result.data?.user) setUser(result.data.user);
+      try {
+        const { households } = await apiRequest<{ households: Household[] }>("/api/households");
+        setHouseholds(households);
+        if (households.length > 0) setActiveHousehold(households[0].id);
+      } catch {
+        // households will be loaded on next app start
+      }
+      router.replace("/(app)/haushalt");
+    } catch {
+      setError(t('login.signInError'));
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  async function handleAppleSignIn() {
+    try {
+      const credential = await AppleAuthentication.signInAsync({
+        requestedScopes: [
+          AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
+          AppleAuthentication.AppleAuthenticationScope.EMAIL,
+        ],
+      });
+      if (!credential.identityToken) return;
+      const result = await authClient.signIn.social({
+        provider: "apple",
+        idToken: { token: credential.identityToken },
+      });
+      if (result.error) {
+        setError(result.error.message ?? t('common.error'));
+        return;
+      }
+      // session is handled by authClient interceptor
+      router.replace("/(app)/haushalt");
+    } catch (err: unknown) {
+      if ((err as { code?: string }).code !== "ERR_CANCELED") {
+        setError(t('login.appleSignInError'));
+      }
+    }
+  }
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      className="flex-1 bg-white"
+    >
+      <View className="flex-1 justify-center px-6">
+        <Text className="mb-2 text-3xl font-bold text-gray-900">
+          {t('login.welcome')}
+        </Text>
+        <Text className="mb-8 text-base text-gray-500">
+          {t('login.subtitle')}
+        </Text>
+
+        {error && (
+          <View className="mb-4 rounded-lg bg-red-50 p-3">
+            <Text className="text-sm text-red-600">{error}</Text>
+          </View>
+        )}
+
+        {Platform.OS === "ios" && (
+          <>
+            <AppleAuthentication.AppleAuthenticationButton
+              buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN_IN}
+              buttonStyle={AppleAuthentication.AppleAuthenticationButtonStyle.BLACK}
+              cornerRadius={12}
+              style={{ width: "100%", height: 50 }}
+              onPress={handleAppleSignIn}
+            />
+            <View className="flex-row items-center gap-3 my-4">
+              <View className="flex-1 h-px bg-gray-200" />
+              <Text className="text-xs text-gray-400">{t('common.or')}</Text>
+              <View className="flex-1 h-px bg-gray-200" />
+            </View>
+          </>
+        )}
+
+        <View className="mb-4">
+          <Text className="mb-1.5 text-sm font-medium text-gray-700">
+            {t('login.emailLabel')}
+          </Text>
+          <TextInput
+            className="rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-base text-gray-900"
+            placeholder={t('login.emailPlaceholder')}
+            value={email}
+            onChangeText={setEmail}
+            autoCapitalize="none"
+            keyboardType="email-address"
+            autoComplete="email"
+          />
+        </View>
+
+        <View className="mb-6">
+          <Text className="mb-1.5 text-sm font-medium text-gray-700">
+            {t('login.passwordLabel')}
+          </Text>
+          <TextInput
+            className="rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-base text-gray-900"
+            placeholder={t('login.passwordPlaceholder')}
+            value={password}
+            onChangeText={setPassword}
+            secureTextEntry
+            autoComplete="password"
+          />
+        </View>
+
+        <Pressable
+          onPress={handleEmailSignIn}
+          disabled={isLoading}
+          className="mb-3 items-center rounded-xl bg-blue-600 py-4 active:opacity-80"
+        >
+          {isLoading ? (
+            <ActivityIndicator color="white" />
+          ) : (
+            <Text className="text-base font-semibold text-white">{t('login.signIn')}</Text>
+          )}
+        </Pressable>
+
+        <Pressable
+          onPress={() => router.push("/(auth)/forgot-password")}
+          className="mb-6 items-center py-2 active:opacity-60"
+        >
+          <Text className="text-sm text-blue-600">{t('login.forgotPassword')}</Text>
+        </Pressable>
+
+        <View className="flex-row justify-center">
+          <Text className="text-sm text-gray-500">{t('login.noAccount')} </Text>
+          <Pressable onPress={() => router.push("/(auth)/register")}>
+            <Text className="text-sm font-semibold text-blue-600">
+              {t('login.register')}
+            </Text>
+          </Pressable>
+        </View>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}

apps/native/app/(auth)/onboarding.tsx

@@ -0,0 +1,363 @@
+import { authClient } from "@/src/lib/auth-client";
+import { apiRequest } from "@/src/lib/api-client";
+import { useAuthStore } from "@/src/stores/auth.store";
+import { useJoinWithCode } from "@/src/hooks/useInvite";
+import { useRouter } from "expo-router";
+import { useRef, useState } from "react";
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  Text,
+  TextInput,
+  View,
+} from "react-native";
+import { useTranslation } from "react-i18next";
+import { Ionicons } from "@expo/vector-icons";
+
+// Which top-level path the user is on
+type Mode = "choose" | "create" | "join";
+
+// ── OTP Box Input ─────────────────────────────────────────────────────────────
+
+function OtpInput({
+  onComplete,
+  hasError,
+}: {
+  onComplete: (code: string) => void;
+  hasError: boolean;
+}) {
+  const [digits, setDigits] = useState<string[]>(["", "", "", "", "", ""]);
+  const refs = useRef<Array<TextInput | null>>([]);
+
+  function handleChange(text: string, index: number) {
+    // Handle paste: if pasted text fills all 6 slots
+    if (text.length === 6) {
+      const upper = text.toUpperCase();
+      const filled = upper.split("").slice(0, 6);
+      setDigits(filled);
+      refs.current[5]?.focus();
+      onComplete(upper);
+      return;
+    }
+
+    // Handle paste into a single box that is actually 2 chars (current + new char)
+    const char = text.slice(-1).toUpperCase();
+    const newDigits = [...digits];
+    newDigits[index] = char;
+    setDigits(newDigits);
+
+    if (char && index < 5) {
+      refs.current[index + 1]?.focus();
+    }
+
+    if (newDigits.every((d) => d !== "")) {
+      onComplete(newDigits.join(""));
+    }
+  }
+
+  function handleKeyPress(key: string, index: number) {
+    if (key === "Backspace") {
+      const newDigits = [...digits];
+      if (digits[index] === "" && index > 0) {
+        newDigits[index - 1] = "";
+        setDigits(newDigits);
+        refs.current[index - 1]?.focus();
+      } else {
+        newDigits[index] = "";
+        setDigits(newDigits);
+      }
+    }
+  }
+
+  return (
+    <View style={{ flexDirection: "row", gap: 8, justifyContent: "center" }}>
+      {digits.map((digit, i) => (
+        <TextInput
+          key={i}
+          ref={(el) => {
+            refs.current[i] = el;
+          }}
+          value={digit}
+          onChangeText={(text) => handleChange(text, i)}
+          onKeyPress={({ nativeEvent }) => handleKeyPress(nativeEvent.key, i)}
+          autoCapitalize="characters"
+          autoCorrect={false}
+          maxLength={2}
+          selectTextOnFocus
+          style={{
+            width: 48,
+            height: 56,
+            borderRadius: 12,
+            borderWidth: 1.5,
+            borderColor: hasError ? "#dc2626" : digit ? "#2563EB" : "#e5e7eb",
+            backgroundColor: "#f9fafb",
+            textAlign: "center",
+            fontSize: 24,
+            fontWeight: "700",
+            color: "#111827",
+          }}
+        />
+      ))}
+    </View>
+  );
+}
+
+// ── Main Screen ───────────────────────────────────────────────────────────────
+
+export default function OnboardingScreen() {
+  const router = useRouter();
+  const { t } = useTranslation();
+  const { setActiveHousehold, setHouseholds, households } = useAuthStore();
+  const [mode, setMode] = useState<Mode>("choose");
+  const [householdName, setHouseholdName] = useState("");
+  const [isCreating, setIsCreating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [pendingCode, setPendingCode] = useState("");
+
+  const { mutate: joinWithCode, isPending: isJoining } = useJoinWithCode();
+
+  async function handleCreateHousehold() {
+    if (!householdName.trim()) {
+      setError(t('onboarding.enterHouseholdName'));
+      return;
+    }
+    setIsCreating(true);
+    setError(null);
+    try {
+      const result = await authClient.organization.create({
+        name: householdName.trim(),
+        slug: householdName.trim().toLowerCase().replace(/\s+/g, "-"),
+      });
+      if (result.error) {
+        setError(result.error.message ?? t('onboarding.createError'));
+        return;
+      }
+      if (result.data?.id) {
+        const organizationId = result.data.id;
+        const newHousehold = { id: organizationId, name: householdName.trim(), role: "owner" };
+        // Bridge: create households row + seed default categories
+        await apiRequest("/api/households/setup", {
+          method: "POST",
+          headers: { "x-household-id": organizationId },
+        });
+        // Append to existing list, keep current active household
+        setHouseholds([...households, newHousehold]);
+        // Only switch if this is the first household (initial onboarding)
+        if (households.length === 0) {
+          setActiveHousehold(organizationId);
+          router.replace("/(auth)/setup");
+        } else {
+          router.back();
+        }
+      }
+    } catch {
+      setError(t('onboarding.createError'));
+    } finally {
+      setIsCreating(false);
+    }
+  }
+
+  function handleCodeComplete(code: string) {
+    setPendingCode(code);
+  }
+
+  function handleJoinSubmit() {
+    const code = pendingCode.trim().toUpperCase();
+    if (code.length !== 6) {
+      setError(t('onboarding.enterInviteCode'));
+      return;
+    }
+    setError(null);
+    joinWithCode(code, {
+      onSuccess: async (data) => {
+        const newHousehold = {
+          id: data.householdId,
+          name: data.householdName,
+          role: "member",
+        };
+        setHouseholds([...households, newHousehold]);
+        setActiveHousehold(data.householdId);
+        router.replace("/(app)/haushalt");
+      },
+      onError: (err) => {
+        const msg = err.message ?? t('invite.invalidCode');
+        if (msg.toLowerCase().includes("already")) {
+          setError(t('invite.alreadyMember'));
+        } else {
+          setError(t('invite.invalidCode'));
+        }
+      },
+    });
+  }
+
+  // ── Choose screen ────────────────────────────────────────────────────────────
+
+  if (mode === "choose") {
+    return (
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        className="flex-1 bg-white"
+      >
+        <View className="flex-1 justify-center px-6">
+          <Text className="mb-2 text-3xl font-bold text-gray-900">
+            {t('invite.setupTitle')}
+          </Text>
+          <Text className="mb-10 text-base text-gray-500">
+            {t('onboarding.setupSubtitle')}
+          </Text>
+
+          {/* Create new */}
+          <Pressable
+            onPress={() => { setError(null); setMode("create"); }}
+            className="mb-4 rounded-xl border border-gray-200 bg-white p-5 active:opacity-70"
+          >
+            <View className="flex-row items-center gap-4">
+              <View className="w-11 h-11 rounded-full bg-blue-50 items-center justify-center">
+                <Ionicons name="add-circle-outline" size={24} color="#2563EB" />
+              </View>
+              <View className="flex-1">
+                <Text className="text-base font-semibold text-gray-900">
+                  {t('invite.createNew')}
+                </Text>
+                <Text className="text-sm text-gray-400">{t('invite.createNewSub')}</Text>
+              </View>
+              <Ionicons name="chevron-forward" size={18} color="#9ca3af" />
+            </View>
+          </Pressable>
+
+          {/* Join with code */}
+          <Pressable
+            onPress={() => { setError(null); setMode("join"); }}
+            className="rounded-xl border border-gray-200 bg-white p-5 active:opacity-70"
+          >
+            <View className="flex-row items-center gap-4">
+              <View className="w-11 h-11 rounded-full bg-blue-50 items-center justify-center">
+                <Ionicons name="key-outline" size={24} color="#2563EB" />
+              </View>
+              <View className="flex-1">
+                <Text className="text-base font-semibold text-gray-900">
+                  {t('invite.enterCode')}
+                </Text>
+                <Text className="text-sm text-gray-400">{t('invite.enterCodeSub')}</Text>
+              </View>
+              <Ionicons name="chevron-forward" size={18} color="#9ca3af" />
+            </View>
+          </Pressable>
+        </View>
+      </KeyboardAvoidingView>
+    );
+  }
+
+  // ── Create screen ────────────────────────────────────────────────────────────
+
+  if (mode === "create") {
+    return (
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        className="flex-1 bg-white"
+      >
+        <View className="flex-1 justify-center px-6">
+          {/* Back */}
+          <Pressable
+            onPress={() => { setError(null); setMode("choose"); }}
+            className="mb-6 flex-row items-center gap-1 self-start active:opacity-60"
+          >
+            <Ionicons name="chevron-back" size={18} color="#6b7280" />
+            <Text className="text-sm text-gray-500">{t('common.back')}</Text>
+          </Pressable>
+
+          <Text className="mb-2 text-3xl font-bold text-gray-900">
+            {t('onboarding.setupTitle')}
+          </Text>
+          <Text className="mb-8 text-base text-gray-500">
+            {t('onboarding.setupSubtitle')}
+          </Text>
+
+          {error && (
+            <View className="mb-4 rounded-lg bg-red-50 p-3">
+              <Text className="text-sm text-red-600">{error}</Text>
+            </View>
+          )}
+
+          <View className="mb-4">
+            <Text className="mb-1.5 text-sm font-medium text-gray-700">
+              {t('onboarding.householdNameLabel')}
+            </Text>
+            <TextInput
+              className="rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-base text-gray-900"
+              placeholder={t('onboarding.householdNamePlaceholder')}
+              value={householdName}
+              onChangeText={setHouseholdName}
+              autoComplete="off"
+            />
+          </View>
+
+          <Pressable
+            onPress={handleCreateHousehold}
+            disabled={isCreating}
+            className="items-center rounded-xl bg-blue-600 py-4 active:opacity-80"
+          >
+            {isCreating ? (
+              <ActivityIndicator color="white" />
+            ) : (
+              <Text className="text-base font-semibold text-white">
+                {t('onboarding.createHousehold')}
+              </Text>
+            )}
+          </Pressable>
+        </View>
+      </KeyboardAvoidingView>
+    );
+  }
+
+  // ── Join screen ──────────────────────────────────────────────────────────────
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      className="flex-1 bg-white"
+    >
+      <View className="flex-1 justify-center px-6">
+        {/* Back */}
+        <Pressable
+          onPress={() => { setError(null); setPendingCode(""); setMode("choose"); }}
+          className="mb-6 flex-row items-center gap-1 self-start active:opacity-60"
+        >
+          <Ionicons name="chevron-back" size={18} color="#6b7280" />
+          <Text className="text-sm text-gray-500">{t('common.back')}</Text>
+        </Pressable>
+
+        <Text className="mb-2 text-3xl font-bold text-gray-900">
+          {t('invite.joinTitle')}
+        </Text>
+        <Text className="mb-8 text-base text-gray-500">
+          {t('invite.joinHint')}
+        </Text>
+
+        <OtpInput onComplete={handleCodeComplete} hasError={!!error} />
+
+        {error && (
+          <View className="mt-4 rounded-lg bg-red-50 p-3">
+            <Text className="text-sm text-red-600 text-center">{error}</Text>
+          </View>
+        )}
+
+        <Pressable
+          onPress={handleJoinSubmit}
+          disabled={isJoining || pendingCode.length !== 6}
+          className="mt-8 items-center rounded-xl bg-blue-600 py-4 active:opacity-80 disabled:opacity-40"
+        >
+          {isJoining ? (
+            <ActivityIndicator color="white" />
+          ) : (
+            <Text className="text-base font-semibold text-white">
+              {t('invite.joinButton')}
+            </Text>
+          )}
+        </Pressable>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}

apps/native/app/(auth)/register.tsx

@@ -0,0 +1,181 @@
+import { signUp, authClient } from "@/src/lib/auth-client";
+import { useRouter } from "expo-router";
+import { useState } from "react";
+import * as AppleAuthentication from "expo-apple-authentication";
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  Text,
+  TextInput,
+  View,
+} from "react-native";
+import { useTranslation } from "react-i18next";
+
+export default function RegisterScreen() {
+  const router = useRouter();
+  const { t } = useTranslation();
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleEmailRegister() {
+    if (!name || !email || !password) {
+      setError("Bitte alle Felder ausfüllen");
+      return;
+    }
+    if (password.length < 8) {
+      setError("Passwort muss mindestens 8 Zeichen lang sein");
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = await signUp.email({
+        name,
+        email,
+        password,
+        callbackURL: "haushaltsApp://onboarding",
+      });
+      if (result.error) {
+        setError(result.error.message ?? "Registrierung fehlgeschlagen");
+        return;
+      }
+      // Email verification required — don't set user/session yet
+      router.replace({ pathname: "/(auth)/verify-email", params: { email } });
+    } catch {
+      setError("Registrierung fehlgeschlagen");
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  async function handleAppleRegister() {
+    try {
+      const credential = await AppleAuthentication.signInAsync({
+        requestedScopes: [
+          AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
+          AppleAuthentication.AppleAuthenticationScope.EMAIL,
+        ],
+      });
+      if (!credential.identityToken) return;
+      const result = await authClient.signIn.social({
+        provider: "apple",
+        idToken: { token: credential.identityToken },
+      });
+      if (result.error) {
+        setError(result.error.message ?? t('common.error'));
+        return;
+      }
+      // session is handled by authClient interceptor
+      router.replace("/(app)/haushalt");
+    } catch (err: unknown) {
+      if ((err as { code?: string }).code !== "ERR_CANCELED") {
+        setError(t('login.appleSignInError'));
+      }
+    }
+  }
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      className="flex-1 bg-white"
+    >
+      <View className="flex-1 justify-center px-6">
+        <Text className="mb-2 text-3xl font-bold text-gray-900">
+          Konto erstellen
+        </Text>
+        <Text className="mb-8 text-base text-gray-500">
+          Starte deinen Haushalts-Manager
+        </Text>
+
+        {error && (
+          <View className="mb-4 rounded-lg bg-red-50 p-3">
+            <Text className="text-sm text-red-600">{error}</Text>
+          </View>
+        )}
+
+        {Platform.OS === "ios" && (
+          <>
+            <AppleAuthentication.AppleAuthenticationButton
+              buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN_UP}
+              buttonStyle={AppleAuthentication.AppleAuthenticationButtonStyle.BLACK}
+              cornerRadius={12}
+              style={{ width: "100%", height: 50 }}
+              onPress={handleAppleRegister}
+            />
+            <View className="flex-row items-center gap-3 my-4">
+              <View className="flex-1 h-px bg-gray-200" />
+              <Text className="text-xs text-gray-400">{t('common.or')}</Text>
+              <View className="flex-1 h-px bg-gray-200" />
+            </View>
+          </>
+        )}
+
+        <View className="mb-4">
+          <Text className="mb-1.5 text-sm font-medium text-gray-700">Name</Text>
+          <TextInput
+            className="rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-base text-gray-900"
+            placeholder="Dein Name"
+            value={name}
+            onChangeText={setName}
+            autoComplete="name"
+          />
+        </View>
+
+        <View className="mb-4">
+          <Text className="mb-1.5 text-sm font-medium text-gray-700">
+            E-Mail
+          </Text>
+          <TextInput
+            className="rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-base text-gray-900"
+            placeholder="deine@email.de"
+            value={email}
+            onChangeText={setEmail}
+            autoCapitalize="none"
+            keyboardType="email-address"
+            autoComplete="email"
+          />
+        </View>
+
+        <View className="mb-6">
+          <Text className="mb-1.5 text-sm font-medium text-gray-700">
+            Passwort
+          </Text>
+          <TextInput
+            className="rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-base text-gray-900"
+            placeholder="Mindestens 8 Zeichen"
+            value={password}
+            onChangeText={setPassword}
+            secureTextEntry
+            autoComplete="new-password"
+          />
+        </View>
+
+        <Pressable
+          onPress={handleEmailRegister}
+          disabled={isLoading}
+          className="mb-3 items-center rounded-xl bg-blue-600 py-4 active:opacity-80"
+        >
+          {isLoading ? (
+            <ActivityIndicator color="white" />
+          ) : (
+            <Text className="text-base font-semibold text-white">
+              Konto erstellen
+            </Text>
+          )}
+        </Pressable>
+
+        <View className="flex-row justify-center">
+          <Text className="text-sm text-gray-500">Bereits ein Konto? </Text>
+          <Pressable onPress={() => router.push("/(auth)/login")}>
+            <Text className="text-sm font-semibold text-blue-600">Anmelden</Text>
+          </Pressable>
+        </View>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}

apps/native/app/(auth)/reset-password.tsx

@@ -0,0 +1,104 @@
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  Text,
+  TextInput,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { authClient } from "@/src/lib/auth-client";
+
+export default function ResetPasswordScreen() {
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+  const { t } = useTranslation();
+  const { token } = useLocalSearchParams<{ token: string }>();
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [isPending, setIsPending] = useState(false);
+  const [done, setDone] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const mismatch = confirm.length > 0 && password !== confirm;
+  const canSave = password.length >= 8 && password === confirm;
+
+  async function handleSave() {
+    if (!canSave || !token) return;
+    setIsPending(true);
+    setError(null);
+    const result = await authClient.resetPassword({ newPassword: password, token });
+    setIsPending(false);
+    if (result.error) {
+      setError(result.error.message ?? t('common.error'));
+    } else {
+      setDone(true);
+      setTimeout(() => router.replace("/(auth)/login"), 2000);
+    }
+  }
+
+  return (
+    <KeyboardAvoidingView
+      className="flex-1 bg-white"
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+    >
+      <View className="flex-1 px-6" style={{ paddingTop: insets.top + 40 }}>
+        <Text className="text-2xl font-bold text-gray-900 mb-2">{t('resetPassword.title')}</Text>
+        <Text className="text-sm text-gray-500 mb-8">{t('resetPassword.subtitle')}</Text>
+
+        {done ? (
+          <View className="bg-green-50 rounded-2xl p-5 items-center" style={{ borderWidth: 1, borderColor: "#bbf7d0" }}>
+            <Text className="text-base font-semibold text-green-800 text-center">{t('resetPassword.successMessage')}</Text>
+          </View>
+        ) : (
+          <>
+            <Text className="text-sm font-medium text-gray-700 mb-2">{t('resetPassword.newPassword')}</Text>
+            <TextInput
+              className="bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-base text-gray-900 mb-4"
+              placeholder="••••••••"
+              placeholderTextColor="#9ca3af"
+              value={password}
+              onChangeText={setPassword}
+              secureTextEntry
+              autoComplete="new-password"
+            />
+
+            <Text className="text-sm font-medium text-gray-700 mb-2">{t('resetPassword.confirmPassword')}</Text>
+            <TextInput
+              className={`bg-gray-50 border rounded-xl px-4 py-3 text-base text-gray-900 mb-1 ${mismatch ? "border-red-300" : "border-gray-200"}`}
+              placeholder="••••••••"
+              placeholderTextColor="#9ca3af"
+              value={confirm}
+              onChangeText={setConfirm}
+              secureTextEntry
+              autoComplete="new-password"
+            />
+            {mismatch && <Text className="text-xs text-red-500 mb-3">{t('resetPassword.mismatch')}</Text>}
+            {!mismatch && <View className="mb-4" />}
+
+            {error && <Text className="text-sm text-red-500 mb-4">{error}</Text>}
+
+            <Pressable
+              onPress={handleSave}
+              disabled={isPending || !canSave}
+              className="rounded-2xl py-4 items-center active:opacity-80"
+              style={{ backgroundColor: !canSave ? "#e5e7eb" : "#2563EB" }}
+            >
+              {isPending ? (
+                <ActivityIndicator color="#fff" />
+              ) : (
+                <Text className="text-base font-semibold" style={{ color: !canSave ? "#9ca3af" : "#fff" }}>
+                  {t('resetPassword.saveButton')}
+                </Text>
+              )}
+            </Pressable>
+          </>
+        )}
+      </View>
+    </KeyboardAvoidingView>
+  );
+}

apps/native/app/(auth)/setup.tsx

@@ -0,0 +1,265 @@
+import { useUpdateHouseholdSettings } from "@/src/hooks/useHouseholdSettings";
+import { Ionicons } from "@expo/vector-icons";
+import { useRouter } from "expo-router";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ActivityIndicator,
+  Pressable,
+  ScrollView,
+  Text,
+  TextInput,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+const ACCENT = "#2563EB";
+const SHARE_PRESETS = [50, 60, 75, 100];
+
+export default function SetupScreen() {
+  const insets = useSafeAreaInsets();
+  const router = useRouter();
+  const { t } = useTranslation();
+  const { mutate: updateSettings, isPending } = useUpdateHouseholdSettings();
+
+  const [step, setStep] = useState<1 | 2 | 3 | 4>(1);
+  const [ownerName, setOwnerName] = useState("");
+  const [partnerName, setPartnerName] = useState("");
+  const [userSharePercent, setUserSharePercent] = useState(50);
+  const [monthlyBudget, setMonthlyBudget] = useState("400");
+  const [splitChildCosts, setSplitChildCosts] = useState(true);
+
+  function handleSkip() {
+    finalize();
+  }
+
+  function finalize() {
+    const input = {
+      ownerName: ownerName.trim() || "Ich",
+      partnerName: partnerName.trim() || "Partner",
+      userSharePercent,
+      monthlyBudget: parseFloat(monthlyBudget.replace(",", ".")) || 400,
+      splitChildCosts,
+      onboardingComplete: true,
+    };
+    updateSettings(input, {
+      onSuccess: () => router.replace("/(app)/haushalt"),
+      onError: () => router.replace("/(app)/haushalt"),
+    });
+  }
+
+  return (
+    <View className="flex-1 bg-white" style={{ paddingTop: insets.top }}>
+      {/* Progress bar */}
+      <View className="flex-row px-6 pt-4 pb-2 gap-2">
+        {([1, 2, 3, 4] as const).map((s) => (
+          <View
+            key={s}
+            className="flex-1 h-1 rounded-full"
+            style={{ backgroundColor: s <= step ? ACCENT : "#e5e7eb" }}
+          />
+        ))}
+      </View>
+
+      {/* Skip */}
+      <View className="flex-row justify-end px-6 py-2">
+        <Pressable onPress={handleSkip} className="py-1 px-2 active:opacity-50">
+          <Text className="text-sm text-gray-400">{t('onboarding.skip')}</Text>
+        </Pressable>
+      </View>
+
+      <ScrollView
+        className="flex-1 px-6"
+        keyboardShouldPersistTaps="handled"
+        contentContainerStyle={{ paddingBottom: 40 }}
+      >
+        {/* Step 1 — Willkommen */}
+        {step === 1 && (
+          <View className="flex-1 items-center justify-center pt-16">
+            <View
+              className="w-20 h-20 rounded-3xl items-center justify-center mb-6"
+              style={{ backgroundColor: "#dbeafe" }}
+            >
+              <Text style={{ fontSize: 40 }}>💰</Text>
+            </View>
+            <Text className="text-3xl font-bold text-gray-900 text-center mb-3">
+              {t('onboarding.welcome')}
+            </Text>
+            <Text className="text-base text-gray-500 text-center leading-6">
+              {t('onboarding.subtitle')}
+            </Text>
+          </View>
+        )}
+
+        {/* Step 2 — Namen */}
+        {step === 2 && (
+          <View className="pt-8">
+            <Text className="text-2xl font-bold text-gray-900 mb-2">{t('setup.namesTitle')}</Text>
+            <Text className="text-base text-gray-500 mb-8">
+              {t('setup.namesHint')}
+            </Text>
+
+            <Text className="text-sm font-medium text-gray-700 mb-1.5">{t('onboarding.yourName')}</Text>
+            <TextInput
+              className="bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-base text-gray-900 mb-4"
+              placeholder={t('onboarding.yourNamePlaceholder')}
+              value={ownerName}
+              onChangeText={setOwnerName}
+              autoCapitalize="words"
+              autoFocus
+            />
+
+            <Text className="text-sm font-medium text-gray-700 mb-1.5">
+              {t('settings.household.partnerName')}
+            </Text>
+            <TextInput
+              className="bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-base text-gray-900"
+              placeholder={t('onboarding.partnerNamePlaceholder')}
+              value={partnerName}
+              onChangeText={setPartnerName}
+              autoCapitalize="words"
+              returnKeyType="next"
+            />
+          </View>
+        )}
+
+        {/* Step 3 — Kostenaufteilung */}
+        {step === 3 && (
+          <View className="pt-8">
+            <Text className="text-2xl font-bold text-gray-900 mb-2">{t('setup.costSplitTitle')}</Text>
+            <Text className="text-base text-gray-500 mb-6">
+              {t('setup.costSplitHint')}
+            </Text>
+
+            {/* Preset buttons */}
+            <View className="flex-row gap-2 mb-6">
+              {SHARE_PRESETS.map((p) => (
+                <Pressable
+                  key={p}
+                  onPress={() => setUserSharePercent(p)}
+                  className="flex-1 py-3 rounded-xl items-center"
+                  style={{
+                    backgroundColor: userSharePercent === p ? ACCENT : "#f3f4f6",
+                  }}
+                >
+                  <Text
+                    className="text-sm font-semibold"
+                    style={{ color: userSharePercent === p ? "#fff" : "#374151" }}
+                  >
+                    {p}%
+                  </Text>
+                </Pressable>
+              ))}
+            </View>
+
+            {/* Preview */}
+            <View
+              className="rounded-xl p-4 mb-6"
+              style={{ backgroundColor: "#eff6ff", borderWidth: 1, borderColor: "#bfdbfe" }}
+            >
+              <Text className="text-sm text-blue-700">
+                {t('onboarding.preview', {
+                own: userSharePercent,
+                partner: partnerName.trim() || 'Partner',
+                rest: 100 - userSharePercent,
+              })}
+              </Text>
+            </View>
+
+            {/* Monthly budget */}
+            <Text className="text-sm font-medium text-gray-700 mb-1.5">
+              {t('setup.monthlyBudgetLabel')}
+            </Text>
+            <View className="flex-row items-center bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 mb-6">
+              <Text className="text-base text-gray-400 mr-2">€</Text>
+              <TextInput
+                className="flex-1 text-base text-gray-900"
+                placeholder="400"
+                value={monthlyBudget}
+                onChangeText={setMonthlyBudget}
+                keyboardType="decimal-pad"
+              />
+            </View>
+
+            {/* Split child costs */}
+            <Text className="text-sm font-medium text-gray-700 mb-3">
+              {t('setup.splitChildCostsLabel')}
+            </Text>
+            <View className="flex-row gap-3">
+              <Pressable
+                onPress={() => setSplitChildCosts(true)}
+                className="flex-1 py-3 rounded-xl items-center"
+                style={{ backgroundColor: splitChildCosts ? ACCENT : "#f3f4f6" }}
+              >
+                <Text
+                  className="text-sm font-semibold"
+                  style={{ color: splitChildCosts ? "#fff" : "#374151" }}
+                >
+                  {t('common.yes')}
+                </Text>
+              </Pressable>
+              <Pressable
+                onPress={() => setSplitChildCosts(false)}
+                className="flex-1 py-3 rounded-xl items-center"
+                style={{ backgroundColor: !splitChildCosts ? ACCENT : "#f3f4f6" }}
+              >
+                <Text
+                  className="text-sm font-semibold"
+                  style={{ color: !splitChildCosts ? "#fff" : "#374151" }}
+                >
+                  {t('common.no')}
+                </Text>
+              </Pressable>
+            </View>
+          </View>
+        )}
+
+        {/* Step 4 — Fertig */}
+        {step === 4 && (
+          <View className="flex-1 items-center justify-center pt-16">
+            <View
+              className="w-20 h-20 rounded-3xl items-center justify-center mb-6"
+              style={{ backgroundColor: "#dcfce7" }}
+            >
+              <Ionicons name="checkmark-circle" size={44} color="#16a34a" />
+            </View>
+            <Text className="text-3xl font-bold text-gray-900 text-center mb-3">
+              {t('onboarding.done')}
+            </Text>
+            <Text className="text-base text-gray-500 text-center leading-6">
+              {t('onboarding.doneHint')}
+            </Text>
+          </View>
+        )}
+      </ScrollView>
+
+      {/* Bottom CTA */}
+      <View className="px-6 pb-8" style={{ paddingBottom: insets.bottom + 24 }}>
+        {step < 4 ? (
+          <Pressable
+            onPress={() => setStep(((step + 1) as 1 | 2 | 3 | 4))}
+            className="rounded-2xl py-4 items-center active:opacity-80"
+            style={{ backgroundColor: ACCENT }}
+          >
+            <Text className="text-base font-semibold text-white">
+              {step === 1 ? t('onboarding.start') : t('common.next')}
+            </Text>
+          </Pressable>
+        ) : (
+          <Pressable
+            onPress={finalize}
+            disabled={isPending}
+            className="rounded-2xl py-4 items-center active:opacity-80"
+            style={{ backgroundColor: "#16a34a" }}
+          >
+            {isPending ? (
+              <ActivityIndicator color="#fff" />
+            ) : (
+              <Text className="text-base font-semibold text-white">{t('onboarding.startApp')}</Text>
+            )}
+          </Pressable>
+        )}
+      </View>
+    </View>
+  );
+}

apps/native/app/(auth)/verify-email.tsx

@@ -0,0 +1,83 @@
+import { authClient } from "@/src/lib/auth-client";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { useState } from "react";
+import { ActivityIndicator, Pressable, Text, View } from "react-native";
+import { useTranslation } from "react-i18next";
+import { Ionicons } from "@expo/vector-icons";
+
+export default function VerifyEmailScreen() {
+  const router = useRouter();
+  const { t } = useTranslation();
+  const { email } = useLocalSearchParams<{ email: string }>();
+  const [isResending, setIsResending] = useState(false);
+  const [resent, setResent] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleResend() {
+    if (!email) return;
+    setIsResending(true);
+    setError(null);
+    try {
+      await authClient.sendVerificationEmail({ email, callbackURL: "/" });
+      setResent(true);
+      setTimeout(() => setResent(false), 4000);
+    } catch {
+      setError(t('verifyEmail.resendError'));
+    } finally {
+      setIsResending(false);
+    }
+  }
+
+  return (
+    <View className="flex-1 bg-white items-center justify-center px-6">
+      <View className="w-16 h-16 rounded-full bg-blue-50 items-center justify-center mb-6">
+        <Ionicons name="mail-outline" size={32} color="#2563EB" />
+      </View>
+
+      <Text className="text-2xl font-bold text-gray-900 mb-2 text-center">
+        {t('verifyEmail.title')}
+      </Text>
+      <Text className="text-base text-gray-500 mb-2 text-center">
+        {t('verifyEmail.hint')}
+      </Text>
+      {email && (
+        <Text className="text-base font-semibold text-gray-900 mb-8 text-center">
+          {email}
+        </Text>
+      )}
+
+      {error && (
+        <View className="mb-4 rounded-lg bg-red-50 p-3 w-full">
+          <Text className="text-sm text-red-600 text-center">{error}</Text>
+        </View>
+      )}
+
+      {resent && (
+        <View className="mb-4 rounded-lg bg-green-50 p-3 w-full">
+          <Text className="text-sm text-green-700 text-center">{t('verifyEmail.resentConfirm')}</Text>
+        </View>
+      )}
+
+      <Pressable
+        onPress={handleResend}
+        disabled={isResending}
+        className="w-full items-center rounded-xl bg-blue-600 py-4 mb-4 active:opacity-80"
+      >
+        {isResending ? (
+          <ActivityIndicator color="white" />
+        ) : (
+          <Text className="text-base font-semibold text-white">
+            {t('verifyEmail.resend')}
+          </Text>
+        )}
+      </Pressable>
+
+      <Pressable
+        onPress={() => router.replace("/(auth)/login")}
+        className="py-2 active:opacity-60"
+      >
+        <Text className="text-sm text-gray-500">{t('verifyEmail.backToLogin')}</Text>
+      </Pressable>
+    </View>
+  );
+}

apps/native/app/(drawer)/(tabs)/_layout.tsx

@@ -1,46 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import { Tabs } from "expo-router";
-import { useThemeColor } from "heroui-native";
-
-export default function TabLayout() {
-  const themeColorForeground = useThemeColor("foreground");
-  const themeColorBackground = useThemeColor("background");
-
-  return (
-    <Tabs
-      screenOptions={{
-        headerShown: false,
-        headerStyle: {
-          backgroundColor: themeColorBackground,
-        },
-        headerTintColor: themeColorForeground,
-        headerTitleStyle: {
-          color: themeColorForeground,
-          fontWeight: "600",
-        },
-        tabBarStyle: {
-          backgroundColor: themeColorBackground,
-        },
-      }}
-    >
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: "Home",
-          tabBarIcon: ({ color, size }: { color: string; size: number }) => (
-            <Ionicons name="home" size={size} color={color} />
-          ),
-        }}
-      />
-      <Tabs.Screen
-        name="two"
-        options={{
-          title: "Explore",
-          tabBarIcon: ({ color, size }: { color: string; size: number }) => (
-            <Ionicons name="compass" size={size} color={color} />
-          ),
-        }}
-      />
-    </Tabs>
-  );
-}

apps/native/app/(drawer)/(tabs)/index.tsx

@@ -1,16 +0,0 @@
-import { Card } from "heroui-native";
-import { Text, View } from "react-native";
-
-import { Container } from "@/components/container";
-
-export default function Home() {
-  return (
-    <Container className="p-6">
-      <View className="flex-1 justify-center items-center">
-        <Card variant="secondary" className="p-8 items-center">
-          <Card.Title className="text-3xl mb-2">Tab One</Card.Title>
-        </Card>
-      </View>
-    </Container>
-  );
-}

apps/native/app/(drawer)/(tabs)/two.tsx

@@ -1,16 +0,0 @@
-import { Card } from "heroui-native";
-import { Text, View } from "react-native";
-
-import { Container } from "@/components/container";
-
-export default function TabTwo() {
-  return (
-    <Container className="p-6">
-      <View className="flex-1 justify-center items-center">
-        <Card variant="secondary" className="p-8 items-center">
-          <Card.Title className="text-3xl mb-2">TabTwo</Card.Title>
-        </Card>
-      </View>
-    </Container>
-  );
-}

apps/native/app/(drawer)/_layout.tsx

@@ -1,72 +0,0 @@
-import { Ionicons, MaterialIcons } from "@expo/vector-icons";
-import { Link } from "expo-router";
-import { Drawer } from "expo-router/drawer";
-import { useThemeColor } from "heroui-native";
-import React, { useCallback } from "react";
-import { Pressable, Text } from "react-native";
-
-import { ThemeToggle } from "@/components/theme-toggle";
-
-function DrawerLayout() {
-  const themeColorForeground = useThemeColor("foreground");
-  const themeColorBackground = useThemeColor("background");
-
-  const renderThemeToggle = useCallback(() => <ThemeToggle />, []);
-
-  return (
-    <Drawer
-      screenOptions={{
-        headerTintColor: themeColorForeground,
-        headerStyle: { backgroundColor: themeColorBackground },
-        headerTitleStyle: {
-          fontWeight: "600",
-          color: themeColorForeground,
-        },
-        headerRight: renderThemeToggle,
-        drawerStyle: { backgroundColor: themeColorBackground },
-      }}
-    >
-      <Drawer.Screen
-        name="index"
-        options={{
-          headerTitle: "Home",
-          drawerLabel: ({ color, focused }) => (
-            <Text style={{ color: focused ? color : themeColorForeground }}>Home</Text>
-          ),
-          drawerIcon: ({ size, color, focused }) => (
-            <Ionicons
-              name="home-outline"
-              size={size}
-              color={focused ? color : themeColorForeground}
-            />
-          ),
-        }}
-      />
-      <Drawer.Screen
-        name="(tabs)"
-        options={{
-          headerTitle: "Tabs",
-          drawerLabel: ({ color, focused }) => (
-            <Text style={{ color: focused ? color : themeColorForeground }}>Tabs</Text>
-          ),
-          drawerIcon: ({ size, color, focused }) => (
-            <MaterialIcons
-              name="border-bottom"
-              size={size}
-              color={focused ? color : themeColorForeground}
-            />
-          ),
-          headerRight: () => (
-            <Link href="/modal" asChild>
-              <Pressable className="mr-4">
-                <Ionicons name="add-outline" size={24} color={themeColorForeground} />
-              </Pressable>
-            </Link>
-          ),
-        }}
-      />
-    </Drawer>
-  );
-}
-
-export default DrawerLayout;

apps/native/app/(drawer)/index.tsx

@@ -1,49 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import { Card, Chip, useThemeColor } from "heroui-native";
-import { Text, View, Pressable } from "react-native";
-
-import { Container } from "@/components/container";
-import { SignIn } from "@/components/sign-in";
-import { SignUp } from "@/components/sign-up";
-import { authClient } from "@/lib/auth-client";
-
-export default function Home() {
-  const { data: session } = authClient.useSession();
-
-  const mutedColor = useThemeColor("muted");
-  const successColor = useThemeColor("success");
-  const dangerColor = useThemeColor("danger");
-  const foregroundColor = useThemeColor("foreground");
-
-  return (
-    <Container className="p-6">
-      <View className="py-4 mb-6">
-        <Text className="text-4xl font-bold text-foreground mb-2">BETTER T STACK</Text>
-      </View>
-
-      {session?.user ? (
-        <Card variant="secondary" className="mb-6 p-4">
-          <Text className="text-foreground text-base mb-2">
-            Welcome, <Text className="font-medium">{session.user.name}</Text>
-          </Text>
-          <Text className="text-muted text-sm mb-4">{session.user.email}</Text>
-          <Pressable
-            className="bg-danger py-3 px-4 rounded-lg self-start active:opacity-70"
-            onPress={() => {
-              authClient.signOut();
-            }}
-          >
-            <Text className="text-foreground font-medium">Sign Out</Text>
-          </Pressable>
-        </Card>
-      ) : null}
-
-      {!session?.user && (
-        <>
-          <SignIn />
-          <SignUp />
-        </>
-      )}
-    </Container>
-  );
-}

apps/native/app/_layout.tsx

@@ -1,34 +1,96 @@
 import "@/global.css";
-import { Stack } from "expo-router";
+import "@/src/i18n";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { Stack, useRouter } from "expo-router";
 import { HeroUINativeProvider } from "heroui-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { KeyboardProvider } from "react-native-keyboard-controller";
+import { useEffect } from "react";
+import { Linking, Alert } from "react-native";
 
 import { AppThemeProvider } from "@/contexts/app-theme-context";
+import { queryClient } from "@/src/lib/query-client";
+import { authClient } from "@/src/lib/auth-client";
+import { useAuthStore } from "@/src/stores/auth.store";
 
-export const unstable_settings = {
-  initialRouteName: "(drawer)",
-};
+if (__DEV__) {
+  const originalConsoleError = console.error;
+  console.error = (...args: unknown[]) => {
+    if (typeof args[0] === "string" && args[0].includes("Maximum update depth")) return;
+    originalConsoleError(...args);
+  };
+}
 
-function StackLayout() {
-  return (
-    <Stack screenOptions={{}}>
-      <Stack.Screen name="(drawer)" options={{ headerShown: false }} />
-      <Stack.Screen name="modal" options={{ title: "Modal", presentation: "modal" }} />
-    </Stack>
-  );
+function DeepLinkHandler() {
+  const router = useRouter();
+
+  async function handleUrl(url: string) {
+    // Match haushaltsApp://invite?invitationId=xxx
+    const match = url.match(/haushaltsApp:\/\/invite\?invitationId=([^&]+)/i);
+    if (!match) return;
+    const invitationId = match[1]!;
+
+    const isLoggedIn = !!useAuthStore.getState().user;
+    if (!isLoggedIn) {
+      // Store invitationId and redirect after login
+      useAuthStore.getState().setPendingInvitationId(invitationId);
+      router.replace("/(auth)/login");
+      return;
+    }
+
+    try {
+      const result = await authClient.organization.acceptInvitation({ invitationId });
+      if (result.error) throw new Error(result.error.message ?? "Fehler");
+
+      // Refresh households list
+      const { apiRequest } = await import("@/src/lib/api-client");
+      const householdsResponse = await apiRequest<{ households: { id: string; name: string; role: string }[] }>("/api/households");
+      useAuthStore.getState().setHouseholds(householdsResponse.households);
+
+      await queryClient.invalidateQueries();
+      Alert.alert("Einladung angenommen", "Du bist jetzt Mitglied des Haushalts.");
+      router.replace("/(app)/haushalt");
+    } catch (err) {
+      Alert.alert("Fehler", (err as Error).message ?? "Einladung konnte nicht angenommen werden.");
+    }
+  }
+
+  useEffect(() => {
+    // Handle cold start URL
+    Linking.getInitialURL().then((url) => {
+      if (url) void handleUrl(url);
+    });
+
+    // Handle foreground/background URL
+    const sub = Linking.addEventListener("url", ({ url }) => {
+      void handleUrl(url);
+    });
+
+    return () => sub.remove();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return null;
 }
 
 export default function Layout() {
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
-      <KeyboardProvider>
-        <AppThemeProvider>
-          <HeroUINativeProvider>
-            <StackLayout />
-          </HeroUINativeProvider>
-        </AppThemeProvider>
-      </KeyboardProvider>
+      <AppThemeProvider>
+        <QueryClientProvider client={queryClient}>
+          <KeyboardProvider>
+            <HeroUINativeProvider>
+              <DeepLinkHandler />
+              <Stack screenOptions={{ headerShown: false }}>
+                <Stack.Screen name="index" />
+                <Stack.Screen name="(auth)" />
+                <Stack.Screen name="(app)" />
+                <Stack.Screen name="+not-found" />
+              </Stack>
+            </HeroUINativeProvider>
+          </KeyboardProvider>
+        </QueryClientProvider>
+      </AppThemeProvider>
     </GestureHandlerRootView>
   );
 }

apps/native/app/index.tsx

@@ -0,0 +1,5 @@
+import { Redirect } from "expo-router";
+
+export default function Index() {
+  return <Redirect href="/(auth)/login" />;
+}