Initial Mobile

mobile/app/(tabs)/_layout.tsx

@@ -0,0 +1,55 @@
+import { Redirect, Tabs } from 'expo-router';
+
+import { HapticTab } from '@/components/haptic-tab';
+import { IconSymbol } from '@/components/ui/icon-symbol';
+import { Colors } from '@/constants/theme';
+import { useColorScheme } from '@/hooks/use-color-scheme';
+import { useAuth } from '@/src/providers/auth-provider';
+
+export default function TabLayout() {
+  const colorScheme = useColorScheme();
+  const { isBootstrapping, token, requiresTenantSelection } = useAuth();
+
+  if (isBootstrapping) {
+    return null;
+  }
+
+  if (!token) {
+    return <Redirect href="/login" />;
+  }
+
+  if (requiresTenantSelection) {
+    return <Redirect href="/tenant-select" />;
+  }
+
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
+        headerShown: true,
+        tabBarButton: HapticTab,
+      }}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: 'Aufgaben',
+          tabBarIcon: ({ color }) => <IconSymbol size={24} name="checklist" color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="explore"
+        options={{
+          title: 'Konto',
+          tabBarIcon: ({ color }) => <IconSymbol size={24} name="person.crop.circle.fill" color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="time"
+        options={{
+          title: 'Zeit',
+          tabBarIcon: ({ color }) => <IconSymbol size={24} name="clock.fill" color={color} />,
+        }}
+      />
+    </Tabs>
+  );
+}

mobile/app/(tabs)/explore.tsx

@@ -0,0 +1,187 @@
+import { useState } from 'react';
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { useAuth, useTokenStorageInfo } from '@/src/providers/auth-provider';
+
+const PRIMARY = '#69c350';
+
+export default function AccountScreen() {
+  const { token, user, tenants, activeTenantId, activeTenant, switchTenant, logout } = useAuth();
+  const storageInfo = useTokenStorageInfo();
+
+  const [switchingTenantId, setSwitchingTenantId] = useState<number | null>(null);
+  const [switchError, setSwitchError] = useState<string | null>(null);
+
+  const userId = String(user?.id || 'unbekannt');
+
+  async function onSwitchTenant(tenantId: number) {
+    setSwitchingTenantId(tenantId);
+    setSwitchError(null);
+
+    try {
+      await switchTenant(tenantId);
+    } catch (err) {
+      setSwitchError(err instanceof Error ? err.message : 'Tenant konnte nicht gewechselt werden.');
+    } finally {
+      setSwitchingTenantId(null);
+    }
+  }
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <Text style={styles.title}>Konto</Text>
+      <Text style={styles.subtitle}>Session-Infos und Tenant-Wechsel.</Text>
+
+      <View style={styles.card}>
+        <Text style={styles.label}>Token vorhanden</Text>
+        <Text style={styles.value}>{token ? 'ja' : 'nein'}</Text>
+
+        <Text style={styles.label}>User ID</Text>
+        <Text style={styles.value}>{userId}</Text>
+
+        <Text style={styles.label}>Aktiver Tenant</Text>
+        <Text style={styles.value}>{activeTenant ? `${activeTenant.name} (#${activeTenantId})` : 'nicht gesetzt'}</Text>
+
+        <Text style={styles.label}>Storage Modus</Text>
+        <Text style={styles.value}>{storageInfo.mode}</Text>
+      </View>
+
+      <View style={styles.card}>
+        <Text style={styles.sectionTitle}>Tenant wechseln</Text>
+
+        {switchError ? <Text style={styles.error}>{switchError}</Text> : null}
+
+        {tenants.map((tenant) => {
+          const tenantId = Number(tenant.id);
+          const isActive = tenantId === activeTenantId;
+          const isSwitching = switchingTenantId === tenantId;
+
+          return (
+            <Pressable
+              key={String(tenant.id)}
+              style={[
+                styles.tenantButton,
+                isActive ? styles.tenantButtonActive : null,
+                isSwitching ? styles.tenantButtonDisabled : null,
+              ]}
+              onPress={() => onSwitchTenant(tenantId)}
+              disabled={isActive || switchingTenantId !== null}>
+              <View style={styles.tenantInfo}>
+                <Text style={styles.tenantName} numberOfLines={2} ellipsizeMode="tail">
+                  {tenant.name}
+                </Text>
+                <Text style={styles.tenantMeta}>ID: {tenantId}</Text>
+              </View>
+              <View style={styles.tenantActionWrap}>
+                <Text style={styles.tenantAction}>{isActive ? 'Aktiv' : isSwitching ? 'Wechsel...' : 'Wechseln'}</Text>
+              </View>
+            </Pressable>
+          );
+        })}
+      </View>
+
+      <Pressable style={styles.logoutButton} onPress={logout}>
+        <Text style={styles.logoutText}>Logout</Text>
+      </Pressable>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    backgroundColor: '#f9fafb',
+    padding: 16,
+    gap: 12,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#111827',
+  },
+  subtitle: {
+    color: '#6b7280',
+  },
+  card: {
+    backgroundColor: '#ffffff',
+    borderRadius: 12,
+    padding: 14,
+    borderWidth: 1,
+    borderColor: '#e5e7eb',
+    gap: 8,
+  },
+  sectionTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#111827',
+    marginBottom: 2,
+  },
+  label: {
+    fontSize: 12,
+    color: '#6b7280',
+    textTransform: 'uppercase',
+  },
+  value: {
+    fontSize: 16,
+    color: '#111827',
+    marginBottom: 2,
+  },
+  error: {
+    color: '#dc2626',
+    marginBottom: 4,
+  },
+  tenantButton: {
+    borderRadius: 10,
+    padding: 12,
+    borderWidth: 1,
+    borderColor: '#d1d5db',
+    backgroundColor: '#ffffff',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  tenantButtonActive: {
+    borderColor: PRIMARY,
+    backgroundColor: '#eff9ea',
+  },
+  tenantButtonDisabled: {
+    opacity: 0.6,
+  },
+  tenantInfo: {
+    flex: 1,
+    minWidth: 0,
+    paddingRight: 10,
+  },
+  tenantName: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: '#111827',
+    flexShrink: 1,
+  },
+  tenantMeta: {
+    color: '#6b7280',
+    marginTop: 3,
+  },
+  tenantActionWrap: {
+    minWidth: 84,
+    alignItems: 'flex-end',
+  },
+  tenantAction: {
+    color: PRIMARY,
+    fontWeight: '600',
+    textAlign: 'right',
+  },
+  logoutButton: {
+    marginTop: 4,
+    backgroundColor: '#dc2626',
+    minHeight: 44,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  logoutText: {
+    color: '#ffffff',
+    fontWeight: '600',
+    fontSize: 16,
+  },
+});

mobile/app/(tabs)/index.tsx

@@ -0,0 +1,567 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  Pressable,
+  RefreshControl,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+
+import { createTask, fetchTasks, fetchTenantProfiles, Task, TaskStatus, updateTask } from '@/src/lib/api';
+import { useAuth } from '@/src/providers/auth-provider';
+
+const STATUSES: TaskStatus[] = ['Offen', 'In Bearbeitung', 'Abgeschlossen'];
+const PRIMARY = '#69c350';
+
+function normalizeStatus(status: unknown): TaskStatus {
+  if (status === 'In Bearbeitung' || status === 'Abgeschlossen') return status;
+  return 'Offen';
+}
+
+function getTaskAssigneeId(task: Task): string | null {
+  return (task.userId || task.user_id || task.profile || null) as string | null;
+}
+
+export default function TasksScreen() {
+  const { token, user, activeTenantId } = useAuth();
+
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [updatingTaskId, setUpdatingTaskId] = useState<number | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [profiles, setProfiles] = useState<{ id: string; label: string }[]>([]);
+
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState<'Alle' | TaskStatus>('Alle');
+  const [showCompleted, setShowCompleted] = useState(false);
+
+  const [showSearchPanel, setShowSearchPanel] = useState(false);
+  const [showFilterPanel, setShowFilterPanel] = useState(false);
+
+  const [createModalOpen, setCreateModalOpen] = useState(false);
+  const [createError, setCreateError] = useState<string | null>(null);
+  const [newTaskName, setNewTaskName] = useState('');
+  const [newTaskDescription, setNewTaskDescription] = useState('');
+
+  const currentUserId = useMemo(() => (user?.id ? String(user.id) : null), [user]);
+
+  const filteredTasks = useMemo(() => {
+    const needle = search.trim().toLowerCase();
+
+    return tasks
+      .filter((task) => {
+        const status = normalizeStatus(task.categorie);
+        if (!showCompleted && status === 'Abgeschlossen') return false;
+        const statusMatch = statusFilter === 'Alle' || status === statusFilter;
+        const textMatch =
+          !needle ||
+          [task.name, task.description, task.categorie].some((value) =>
+            String(value || '').toLowerCase().includes(needle)
+          );
+        return statusMatch && textMatch;
+      })
+      .sort((a, b) => Number(a.id) - Number(b.id));
+  }, [search, showCompleted, statusFilter, tasks]);
+
+  function getAssigneeLabel(task: Task): string {
+    const assigneeId = getTaskAssigneeId(task);
+    if (!assigneeId) return '-';
+    return profiles.find((profile) => profile.id === assigneeId)?.label || assigneeId;
+  }
+
+  const loadTasks = useCallback(
+    async (showSpinner = true) => {
+      if (!token) return;
+
+      if (showSpinner) setLoading(true);
+      setError(null);
+
+      try {
+        const [taskRows, profileRows] = await Promise.all([fetchTasks(token), fetchTenantProfiles(token)]);
+        setTasks(taskRows || []);
+        setProfiles(
+          (profileRows || [])
+            .map((profile) => {
+              const id = profile.user_id || (profile.id ? String(profile.id) : null);
+              const label = profile.full_name || profile.fullName || profile.email || id;
+              return id ? { id: String(id), label: String(label || id) } : null;
+            })
+            .filter((value): value is { id: string; label: string } => Boolean(value))
+        );
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Aufgaben konnten nicht geladen werden.');
+      } finally {
+        setLoading(false);
+        setRefreshing(false);
+      }
+    },
+    [token]
+  );
+
+  useEffect(() => {
+    if (!token || !activeTenantId) return;
+    void loadTasks(true);
+  }, [token, activeTenantId, loadTasks]);
+
+  async function onRefresh() {
+    if (!token) return;
+    setRefreshing(true);
+    await loadTasks(false);
+  }
+
+  function closeCreateModal() {
+    setCreateModalOpen(false);
+    setCreateError(null);
+    setNewTaskName('');
+    setNewTaskDescription('');
+  }
+
+  async function onCreateTask() {
+    if (!token) return;
+
+    const name = newTaskName.trim();
+    if (!name) {
+      setCreateError('Bitte einen Aufgabennamen eingeben.');
+      return;
+    }
+
+    setSaving(true);
+    setCreateError(null);
+
+    try {
+      await createTask(token, {
+        name,
+        description: newTaskDescription.trim() || null,
+        categorie: 'Offen',
+        userId: currentUserId,
+      });
+
+      closeCreateModal();
+      await loadTasks(false);
+    } catch (err) {
+      setCreateError(err instanceof Error ? err.message : 'Aufgabe konnte nicht erstellt werden.');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function setTaskStatus(task: Task, status: TaskStatus) {
+    if (!token || !task?.id) return;
+    if (normalizeStatus(task.categorie) === status) return;
+
+    setUpdatingTaskId(Number(task.id));
+    setError(null);
+
+    try {
+      await updateTask(token, Number(task.id), { categorie: status });
+      setTasks((prev) => prev.map((item) => (item.id === task.id ? { ...item, categorie: status } : item)));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Status konnte nicht gesetzt werden.');
+    } finally {
+      setUpdatingTaskId(null);
+    }
+  }
+
+  return (
+    <View style={styles.screen}>
+      <ScrollView
+        contentContainerStyle={styles.container}
+        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}>
+        <View style={styles.topActions}>
+          <Pressable
+            style={[styles.topActionButton, showSearchPanel ? styles.topActionButtonActive : null]}
+            onPress={() => setShowSearchPanel((prev) => !prev)}>
+            <Text style={[styles.topActionText, showSearchPanel ? styles.topActionTextActive : null]}>Suche</Text>
+          </Pressable>
+          <Pressable
+            style={[styles.topActionButton, showFilterPanel ? styles.topActionButtonActive : null]}
+            onPress={() => setShowFilterPanel((prev) => !prev)}>
+            <Text style={[styles.topActionText, showFilterPanel ? styles.topActionTextActive : null]}>Filter</Text>
+          </Pressable>
+        </View>
+
+        {showSearchPanel ? (
+          <View style={styles.panel}>
+            <TextInput
+              placeholder="Suche"
+              placeholderTextColor="#9ca3af"
+              style={styles.input}
+              value={search}
+              onChangeText={setSearch}
+            />
+          </View>
+        ) : null}
+
+        {showFilterPanel ? (
+          <View style={styles.panel}>
+            <View style={styles.filterRow}>
+              {(['Alle', 'Offen', 'In Bearbeitung'] as const).map((status) => (
+                <Pressable
+                  key={status}
+                  style={[styles.filterChip, statusFilter === status ? styles.filterChipActive : null]}
+                  onPress={() => setStatusFilter(status)}>
+                  <Text
+                    style={[
+                      styles.filterChipText,
+                      statusFilter === status ? styles.filterChipTextActive : null,
+                    ]}>
+                    {status}
+                  </Text>
+                </Pressable>
+              ))}
+              <Pressable
+                style={[styles.filterChip, showCompleted ? styles.filterChipActive : null]}
+                onPress={() => setShowCompleted((prev) => !prev)}>
+                <Text style={[styles.filterChipText, showCompleted ? styles.filterChipTextActive : null]}>
+                  Abgeschlossene anzeigen
+                </Text>
+              </Pressable>
+            </View>
+          </View>
+        ) : null}
+
+        {error ? <Text style={styles.error}>{error}</Text> : null}
+
+        {loading ? (
+          <View style={styles.loadingBox}>
+            <ActivityIndicator />
+            <Text style={styles.loadingText}>Aufgaben werden geladen...</Text>
+          </View>
+        ) : null}
+
+        {!loading && filteredTasks.length === 0 ? (
+          <Text style={styles.empty}>Keine Aufgaben gefunden.</Text>
+        ) : null}
+
+        {!loading &&
+          filteredTasks.map((task) => {
+            const status = normalizeStatus(task.categorie);
+            const isUpdating = updatingTaskId === Number(task.id);
+
+            return (
+              <View key={String(task.id)} style={styles.taskCard}>
+                <View style={styles.taskHeader}>
+                  <Text style={styles.taskTitle} numberOfLines={2}>
+                    {task.name}
+                  </Text>
+                  <Text style={styles.statusBadge}>{status}</Text>
+                </View>
+
+                {task.description ? (
+                  <Text style={styles.taskDescription} numberOfLines={3}>
+                    {task.description}
+                  </Text>
+                ) : null}
+
+                <Text style={styles.taskMeta}>Zuweisung: {getAssigneeLabel(task)}</Text>
+
+                <View style={styles.actionRow}>
+                  {STATUSES.map((nextStatus) => (
+                    <Pressable
+                      key={nextStatus}
+                      style={[
+                        styles.actionButton,
+                        nextStatus === status ? styles.actionButtonActive : null,
+                        isUpdating ? styles.buttonDisabled : null,
+                      ]}
+                      onPress={() => setTaskStatus(task, nextStatus)}
+                      disabled={isUpdating || nextStatus === status}>
+                      <Text style={styles.actionButtonText}>{nextStatus}</Text>
+                    </Pressable>
+                  ))}
+                </View>
+              </View>
+            );
+          })}
+      </ScrollView>
+
+      <Pressable style={styles.fab} onPress={() => setCreateModalOpen(true)}>
+        <Text style={styles.fabText}>+</Text>
+      </Pressable>
+
+      <Modal visible={createModalOpen} transparent animationType="fade" onRequestClose={closeCreateModal}>
+        <View style={styles.modalOverlay}>
+          <KeyboardAvoidingView
+            behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+            style={styles.modalKeyboardWrap}>
+            <View style={styles.modalCard}>
+              <Text style={styles.modalTitle}>Neue Aufgabe</Text>
+
+              <TextInput
+                placeholder="Titel"
+                placeholderTextColor="#9ca3af"
+                style={styles.input}
+                value={newTaskName}
+                onChangeText={setNewTaskName}
+              />
+              <TextInput
+                placeholder="Beschreibung (optional)"
+                placeholderTextColor="#9ca3af"
+                style={[styles.input, styles.inputMultiline]}
+                multiline
+                value={newTaskDescription}
+                onChangeText={setNewTaskDescription}
+              />
+
+              {createError ? <Text style={styles.error}>{createError}</Text> : null}
+
+              <View style={styles.modalActions}>
+                <Pressable style={styles.secondaryButton} onPress={closeCreateModal} disabled={saving}>
+                  <Text style={styles.secondaryButtonText}>Abbrechen</Text>
+                </Pressable>
+                <Pressable
+                  style={[styles.primaryButton, saving ? styles.buttonDisabled : null]}
+                  onPress={onCreateTask}
+                  disabled={saving}>
+                  <Text style={styles.primaryButtonText}>{saving ? 'Speichere...' : 'Anlegen'}</Text>
+                </Pressable>
+              </View>
+            </View>
+          </KeyboardAvoidingView>
+        </View>
+      </Modal>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    backgroundColor: '#f9fafb',
+  },
+  container: {
+    padding: 16,
+    gap: 12,
+    paddingBottom: 96,
+  },
+  topActions: {
+    flexDirection: 'row',
+    gap: 8,
+  },
+  topActionButton: {
+    borderWidth: 1,
+    borderColor: '#d1d5db',
+    borderRadius: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    backgroundColor: '#ffffff',
+  },
+  topActionButtonActive: {
+    borderColor: PRIMARY,
+    backgroundColor: '#eff9ea',
+  },
+  topActionText: {
+    color: '#374151',
+    fontWeight: '600',
+  },
+  topActionTextActive: {
+    color: '#3d7a30',
+  },
+  panel: {
+    backgroundColor: '#ffffff',
+    borderRadius: 12,
+    padding: 12,
+    borderWidth: 1,
+    borderColor: '#e5e7eb',
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#d1d5db',
+    borderRadius: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 15,
+    color: '#111827',
+    backgroundColor: '#ffffff',
+  },
+  inputMultiline: {
+    minHeight: 72,
+    textAlignVertical: 'top',
+  },
+  filterRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+  },
+  filterChip: {
+    borderRadius: 999,
+    borderWidth: 1,
+    borderColor: '#d1d5db',
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    backgroundColor: '#ffffff',
+  },
+  filterChipActive: {
+    borderColor: PRIMARY,
+    backgroundColor: '#eff9ea',
+  },
+  filterChipText: {
+    color: '#374151',
+    fontSize: 13,
+    fontWeight: '500',
+  },
+  filterChipTextActive: {
+    color: '#3d7a30',
+  },
+  error: {
+    color: '#dc2626',
+    fontSize: 13,
+  },
+  loadingBox: {
+    padding: 16,
+    alignItems: 'center',
+    gap: 8,
+  },
+  loadingText: {
+    color: '#6b7280',
+  },
+  empty: {
+    color: '#6b7280',
+    textAlign: 'center',
+    paddingVertical: 16,
+  },
+  taskCard: {
+    backgroundColor: '#ffffff',
+    borderRadius: 12,
+    padding: 12,
+    gap: 8,
+    borderWidth: 1,
+    borderColor: '#e5e7eb',
+  },
+  taskHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    gap: 8,
+  },
+  taskTitle: {
+    flex: 1,
+    color: '#111827',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  statusBadge: {
+    color: '#3d7a30',
+    backgroundColor: '#eff9ea',
+    borderRadius: 999,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    fontSize: 12,
+    overflow: 'hidden',
+  },
+  taskDescription: {
+    color: '#374151',
+    fontSize: 14,
+  },
+  taskMeta: {
+    color: '#6b7280',
+    fontSize: 12,
+  },
+  actionRow: {
+    flexDirection: 'row',
+    gap: 8,
+    flexWrap: 'wrap',
+  },
+  actionButton: {
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#d1d5db',
+    backgroundColor: '#ffffff',
+    paddingHorizontal: 10,
+    paddingVertical: 7,
+  },
+  actionButtonActive: {
+    borderColor: PRIMARY,
+    backgroundColor: '#eff9ea',
+  },
+  actionButtonText: {
+    color: '#1f2937',
+    fontSize: 12,
+    fontWeight: '500',
+  },
+  fab: {
+    position: 'absolute',
+    right: 18,
+    bottom: 24,
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    backgroundColor: PRIMARY,
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 4,
+    shadowColor: '#111827',
+    shadowOpacity: 0.18,
+    shadowRadius: 10,
+    shadowOffset: { width: 0, height: 4 },
+  },
+  fabText: {
+    color: '#ffffff',
+    fontSize: 30,
+    lineHeight: 30,
+    fontWeight: '500',
+    marginTop: -1,
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.35)',
+    justifyContent: 'center',
+    padding: 16,
+  },
+  modalKeyboardWrap: {
+    width: '100%',
+  },
+  modalCard: {
+    backgroundColor: '#ffffff',
+    borderRadius: 14,
+    padding: 14,
+    gap: 10,
+  },
+  modalTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#111827',
+  },
+  modalActions: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    gap: 8,
+    marginTop: 2,
+  },
+  secondaryButton: {
+    minHeight: 42,
+    borderRadius: 10,
+    paddingHorizontal: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#e5e7eb',
+  },
+  secondaryButtonText: {
+    color: '#111827',
+    fontWeight: '600',
+  },
+  primaryButton: {
+    minHeight: 42,
+    borderRadius: 10,
+    paddingHorizontal: 14,
+    backgroundColor: PRIMARY,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  primaryButtonText: {
+    color: '#ffffff',
+    fontWeight: '600',
+  },
+  buttonDisabled: {
+    opacity: 0.6,
+  },
+});

mobile/app/_layout.tsx

@@ -0,0 +1,19 @@
+import { Stack } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+import 'react-native-reanimated';
+
+import { AuthProvider } from '@/src/providers/auth-provider';
+
+export default function RootLayout() {
+  return (
+    <AuthProvider>
+      <Stack>
+        <Stack.Screen name="index" options={{ headerShown: false }} />
+        <Stack.Screen name="login" options={{ title: 'Login', headerBackVisible: false }} />
+        <Stack.Screen name="tenant-select" options={{ title: 'Tenant auswaehlen', headerBackVisible: false }} />
+        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+      </Stack>
+      <StatusBar style="dark" />
+    </AuthProvider>
+  );
+}

mobile/app/index.tsx

@@ -0,0 +1,41 @@
+import { Redirect } from 'expo-router';
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
+
+import { useAuth } from '@/src/providers/auth-provider';
+
+export default function IndexScreen() {
+  const { isBootstrapping, token, requiresTenantSelection } = useAuth();
+
+  if (isBootstrapping) {
+    return (
+      <View style={styles.centered}>
+        <ActivityIndicator size="large" />
+        <Text style={styles.copy}>Initialisiere mobile Session...</Text>
+      </View>
+    );
+  }
+
+  if (!token) {
+    return <Redirect href="/login" />;
+  }
+
+  if (requiresTenantSelection) {
+    return <Redirect href="/tenant-select" />;
+  }
+
+  return <Redirect href="/(tabs)" />;
+}
+
+const styles = StyleSheet.create({
+  centered: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 12,
+    padding: 24,
+  },
+  copy: {
+    fontSize: 14,
+    color: '#4b5563',
+  },
+});

mobile/app/login.tsx

@@ -0,0 +1,164 @@
+import { useState } from 'react';
+import { Redirect, router } from 'expo-router';
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+
+import { API_BASE_URL } from '@/src/config/env';
+import { useAuth, useTokenStorageInfo } from '@/src/providers/auth-provider';
+
+export default function LoginScreen() {
+  const { token, requiresTenantSelection, login } = useAuth();
+  const storageInfo = useTokenStorageInfo();
+
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  if (token) {
+    return <Redirect href={requiresTenantSelection ? '/tenant-select' : '/(tabs)'} />;
+  }
+
+  async function onSubmit() {
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      await login(email.trim(), password);
+      router.replace('/');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Login fehlgeschlagen.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      style={styles.container}>
+      <View style={styles.card}>
+        <Text style={styles.title}>FEDEO Mobile</Text>
+        <Text style={styles.subtitle}>Login mit anschliessender Tenant-Auswahl</Text>
+
+        <Text style={styles.label}>E-Mail</Text>
+        <TextInput
+          autoCapitalize="none"
+          autoCorrect={false}
+          keyboardType="email-address"
+          placeholder="name@firma.de"
+          placeholderTextColor="#9ca3af"
+          style={styles.input}
+          value={email}
+          onChangeText={setEmail}
+        />
+
+        <Text style={styles.label}>Passwort</Text>
+        <TextInput
+          secureTextEntry
+          placeholder="••••••••"
+          placeholderTextColor="#9ca3af"
+          style={styles.input}
+          value={password}
+          onChangeText={setPassword}
+        />
+
+        {error ? <Text style={styles.error}>{error}</Text> : null}
+
+        <Pressable
+          style={[styles.button, isSubmitting ? styles.buttonDisabled : null]}
+          onPress={onSubmit}
+          disabled={isSubmitting || !email || !password}>
+          {isSubmitting ? <ActivityIndicator color="#ffffff" /> : <Text style={styles.buttonText}>Anmelden</Text>}
+        </Pressable>
+
+        <View style={styles.metaBox}>
+          <Text style={styles.metaText}>API: {API_BASE_URL}</Text>
+          <Text style={styles.metaText}>Token Storage: {storageInfo.mode}</Text>
+        </View>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    padding: 20,
+    backgroundColor: '#f3f4f6',
+  },
+  card: {
+    backgroundColor: '#ffffff',
+    borderRadius: 16,
+    padding: 20,
+    gap: 10,
+    shadowColor: '#111827',
+    shadowOpacity: 0.08,
+    shadowRadius: 16,
+    shadowOffset: { width: 0, height: 8 },
+    elevation: 3,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#111827',
+  },
+  subtitle: {
+    color: '#6b7280',
+    marginBottom: 8,
+  },
+  label: {
+    fontSize: 14,
+    color: '#374151',
+    fontWeight: '500',
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#d1d5db',
+    borderRadius: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 16,
+    color: '#111827',
+  },
+  button: {
+    marginTop: 6,
+    backgroundColor: '#16a34a',
+    borderRadius: 10,
+    minHeight: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonDisabled: {
+    backgroundColor: '#86efac',
+  },
+  buttonText: {
+    color: '#ffffff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  error: {
+    color: '#dc2626',
+    fontSize: 13,
+  },
+  metaBox: {
+    marginTop: 8,
+    paddingTop: 8,
+    borderTopWidth: 1,
+    borderTopColor: '#e5e7eb',
+    gap: 4,
+  },
+  metaText: {
+    fontSize: 12,
+    color: '#6b7280',
+  },
+});

mobile/app/modal.tsx

@@ -0,0 +1,29 @@
+import { Link } from 'expo-router';
+import { StyleSheet } from 'react-native';
+
+import { ThemedText } from '@/components/themed-text';
+import { ThemedView } from '@/components/themed-view';
+
+export default function ModalScreen() {
+  return (
+    <ThemedView style={styles.container}>
+      <ThemedText type="title">This is a modal</ThemedText>
+      <Link href="/" dismissTo style={styles.link}>
+        <ThemedText type="link">Go to home screen</ThemedText>
+      </Link>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 20,
+  },
+  link: {
+    marginTop: 15,
+    paddingVertical: 15,
+  },
+});

mobile/app/tenant-select.tsx

@@ -0,0 +1,110 @@
+import { useState } from 'react';
+import { Redirect, router } from 'expo-router';
+import { ActivityIndicator, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { useAuth } from '@/src/providers/auth-provider';
+
+export default function TenantSelectScreen() {
+  const { token, tenants, activeTenantId, requiresTenantSelection, switchTenant } = useAuth();
+
+  const [switchingTenantId, setSwitchingTenantId] = useState<number | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  if (!token) {
+    return <Redirect href="/login" />;
+  }
+
+  if (!requiresTenantSelection && activeTenantId) {
+    return <Redirect href="/(tabs)" />;
+  }
+
+  async function onSelectTenant(tenantId: number) {
+    setSwitchingTenantId(tenantId);
+    setError(null);
+
+    try {
+      await switchTenant(tenantId);
+      router.replace('/(tabs)');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Tenant konnte nicht gewechselt werden.');
+    } finally {
+      setSwitchingTenantId(null);
+    }
+  }
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <Text style={styles.title}>Tenant auswaehlen</Text>
+      <Text style={styles.subtitle}>Bitte waehle den Tenant fuer deine Session.</Text>
+
+      {error ? <Text style={styles.error}>{error}</Text> : null}
+
+      {tenants.map((tenant) => {
+        const tenantId = Number(tenant.id);
+        const isBusy = switchingTenantId === tenantId;
+
+        return (
+          <Pressable
+            key={String(tenant.id)}
+            style={[styles.tenantButton, isBusy ? styles.tenantButtonDisabled : null]}
+            onPress={() => onSelectTenant(tenantId)}
+            disabled={switchingTenantId !== null}>
+            <View>
+              <Text style={styles.tenantName}>{tenant.name}</Text>
+              <Text style={styles.tenantMeta}>ID: {tenantId}</Text>
+            </View>
+            {isBusy ? <ActivityIndicator /> : <Text style={styles.tenantAction}>Auswaehlen</Text>}
+          </Pressable>
+        );
+      })}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    padding: 16,
+    gap: 10,
+    backgroundColor: '#f9fafb',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#111827',
+  },
+  subtitle: {
+    color: '#6b7280',
+    marginBottom: 8,
+  },
+  error: {
+    color: '#dc2626',
+    marginBottom: 8,
+  },
+  tenantButton: {
+    borderRadius: 12,
+    padding: 14,
+    borderWidth: 1,
+    borderColor: '#d1d5db',
+    backgroundColor: '#ffffff',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  tenantButtonDisabled: {
+    opacity: 0.6,
+  },
+  tenantName: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#111827',
+  },
+  tenantMeta: {
+    color: '#6b7280',
+    marginTop: 4,
+  },
+  tenantAction: {
+    color: '#2563eb',
+    fontWeight: '600',
+  },
+});