KI-AGENT: Mobile Termine und Kalender ergänzen

mobile/app/(tabs)/explore.tsx

@@ -32,6 +32,18 @@ const ITEMS = [
     subtitle: '',
     href: '/more/plants',
   },
+  {
+    key: 'events',
+    title: 'Termine',
+    subtitle: 'Termine anzeigen und eintragen',
+    href: '/more/events',
+  },
+  {
+    key: 'calendar',
+    title: 'Kalender',
+    subtitle: 'Monatsübersicht und Tagesplanung',
+    href: '/more/calendar',
+  },
   {
     key: 'inventory',
     title: 'Kundeninventar',

mobile/app/_layout.tsx

@@ -109,6 +109,33 @@ export default function RootLayout() {
             headerTintColor: '#111827',
           }}
         />
+        <Stack.Screen
+          name="more/events"
+          options={{
+            title: 'Termine',
+            headerBackButtonDisplayMode: 'minimal',
+            headerBackTitle: '',
+            headerTintColor: '#111827',
+          }}
+        />
+        <Stack.Screen
+          name="more/calendar"
+          options={{
+            title: 'Kalender',
+            headerBackButtonDisplayMode: 'minimal',
+            headerBackTitle: '',
+            headerTintColor: '#111827',
+          }}
+        />
+        <Stack.Screen
+          name="more/event/[id]"
+          options={{
+            title: 'Termin',
+            headerBackButtonDisplayMode: 'minimal',
+            headerBackTitle: '',
+            headerTintColor: '#111827',
+          }}
+        />
         <Stack.Screen
           name="more/plant/[id]"
           options={{

mobile/app/more/calendar.tsx

@@ -0,0 +1,224 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  RefreshControl,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { router } from 'expo-router';
+
+import { EventCreateModal } from '@/components/event-create-modal';
+import { CalendarEvent, fetchEvents, fetchProjects, Project } from '@/src/lib/api';
+import { useAuth } from '@/src/providers/auth-provider';
+
+const PRIMARY = '#69c350';
+const WEEKDAYS = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
+
+function startOfDay(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
+function dateKey(date: Date): string {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+}
+
+function buildCalendarDays(month: Date): Date[] {
+  const first = new Date(month.getFullYear(), month.getMonth(), 1);
+  const mondayOffset = (first.getDay() + 6) % 7;
+  const start = new Date(first);
+  start.setDate(first.getDate() - mondayOffset);
+  return Array.from({ length: 42 }, (_, index) => {
+    const date = new Date(start);
+    date.setDate(start.getDate() + index);
+    return date;
+  });
+}
+
+function formatTime(value: string): string {
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? '-' : date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
+}
+
+export default function CalendarScreen() {
+  const { token } = useAuth();
+  const today = useMemo(() => startOfDay(new Date()), []);
+  const [month, setMonth] = useState(() => new Date(today.getFullYear(), today.getMonth(), 1));
+  const [selectedDate, setSelectedDate] = useState(today);
+  const [events, setEvents] = useState<CalendarEvent[]>([]);
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [createOpen, setCreateOpen] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(async (showSpinner = true) => {
+    if (!token) return;
+    if (showSpinner) setLoading(true);
+    setError(null);
+    try {
+      const [eventRows, projectRows] = await Promise.all([fetchEvents(token), fetchProjects(token)]);
+      setEvents(eventRows);
+      setProjects(projectRows);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Der Kalender konnte nicht geladen werden.');
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  }, [token]);
+
+  useEffect(() => {
+    void load(true);
+  }, [load]);
+
+  const eventsByDay = useMemo(() => {
+    const map = new Map<string, CalendarEvent[]>();
+    events.forEach((event) => {
+      const start = new Date(event.startDate);
+      if (Number.isNaN(start.getTime())) return;
+      const key = dateKey(start);
+      const rows = map.get(key) || [];
+      rows.push(event);
+      map.set(key, rows);
+    });
+    map.forEach((rows) => rows.sort((a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime()));
+    return map;
+  }, [events]);
+
+  const days = useMemo(() => buildCalendarDays(month), [month]);
+  const selectedEvents = eventsByDay.get(dateKey(selectedDate)) || [];
+
+  function changeMonth(delta: number) {
+    const next = new Date(month.getFullYear(), month.getMonth() + delta, 1);
+    setMonth(next);
+    setSelectedDate(next);
+  }
+
+  function selectDay(date: Date) {
+    setSelectedDate(date);
+    if (date.getMonth() !== month.getMonth() || date.getFullYear() !== month.getFullYear()) {
+      setMonth(new Date(date.getFullYear(), date.getMonth(), 1));
+    }
+  }
+
+  async function onRefresh() {
+    setRefreshing(true);
+    await load(false);
+  }
+
+  return (
+    <ScrollView
+      style={styles.screen}
+      contentContainerStyle={styles.container}
+      refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}>
+      <View style={styles.monthHeader}>
+        <Pressable style={styles.navButton} onPress={() => changeMonth(-1)}><Text style={styles.navButtonText}>‹</Text></Pressable>
+        <Pressable onPress={() => { setMonth(new Date(today.getFullYear(), today.getMonth(), 1)); setSelectedDate(today); }}>
+          <Text style={styles.monthTitle}>{month.toLocaleDateString('de-DE', { month: 'long', year: 'numeric' })}</Text>
+          <Text style={styles.todayHint}>Heute</Text>
+        </Pressable>
+        <Pressable style={styles.navButton} onPress={() => changeMonth(1)}><Text style={styles.navButtonText}>›</Text></Pressable>
+      </View>
+
+      {error ? <Text style={styles.error}>{error}</Text> : null}
+      {loading ? <ActivityIndicator style={styles.loader} /> : null}
+
+      <View style={styles.calendarCard}>
+        <View style={styles.weekRow}>
+          {WEEKDAYS.map((weekday) => <Text key={weekday} style={styles.weekday}>{weekday}</Text>)}
+        </View>
+        <View style={styles.daysGrid}>
+          {days.map((date) => {
+            const key = dateKey(date);
+            const dayEvents = eventsByDay.get(key) || [];
+            const outside = date.getMonth() !== month.getMonth();
+            const selected = key === dateKey(selectedDate);
+            const isToday = key === dateKey(today);
+            return (
+              <Pressable key={key} style={[styles.dayCell, selected ? styles.dayCellSelected : null]} onPress={() => selectDay(date)}>
+                <Text style={[styles.dayNumber, outside ? styles.dayNumberOutside : null, isToday ? styles.dayNumberToday : null]}>
+                  {date.getDate()}
+                </Text>
+                <View style={styles.eventDots}>
+                  {dayEvents.slice(0, 3).map((event) => (
+                    <View key={String(event.id)} style={[styles.eventDot, { backgroundColor: event.color || PRIMARY }]} />
+                  ))}
+                </View>
+              </Pressable>
+            );
+          })}
+        </View>
+      </View>
+
+      <View style={styles.agendaCard}>
+        <View style={styles.agendaHeader}>
+          <View>
+            <Text style={styles.agendaTitle}>{selectedDate.toLocaleDateString('de-DE', { weekday: 'long', day: '2-digit', month: 'long' })}</Text>
+            <Text style={styles.agendaCount}>{selectedEvents.length} {selectedEvents.length === 1 ? 'Termin' : 'Termine'}</Text>
+          </View>
+          <Pressable style={styles.addButton} onPress={() => setCreateOpen(true)}><Text style={styles.addButtonText}>+ Termin</Text></Pressable>
+        </View>
+        {selectedEvents.length === 0 ? <Text style={styles.empty}>Keine Termine an diesem Tag.</Text> : null}
+        {selectedEvents.map((event) => (
+          <Pressable key={String(event.id)} style={styles.eventRow} onPress={() => router.push(`/more/event/${event.id}` as any)}>
+            <View style={[styles.colorBar, { backgroundColor: event.color || PRIMARY }]} />
+            <View style={styles.eventMain}>
+              <Text style={styles.eventTime}>{formatTime(event.startDate)}</Text>
+              <Text style={styles.eventName}>{event.name}</Text>
+              {typeof event.project === 'object' && event.project?.name ? <Text style={styles.eventProject}>{event.project.name}</Text> : null}
+            </View>
+            <Text style={styles.arrow}>›</Text>
+          </Pressable>
+        ))}
+      </View>
+
+      <EventCreateModal
+        visible={createOpen}
+        projects={projects}
+        initialDate={selectedDate}
+        onClose={() => setCreateOpen(false)}
+        onCreated={() => load(false)}
+      />
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: { flex: 1, backgroundColor: '#f9fafb' },
+  container: { padding: 12, gap: 12, paddingBottom: 28 },
+  monthHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
+  navButton: { width: 42, height: 42, borderRadius: 21, backgroundColor: '#ffffff', alignItems: 'center', justifyContent: 'center', borderWidth: 1, borderColor: '#e5e7eb' },
+  navButtonText: { color: '#111827', fontSize: 29, lineHeight: 31 },
+  monthTitle: { color: '#111827', fontSize: 18, fontWeight: '700', textAlign: 'center' },
+  todayHint: { color: '#3d7a30', fontSize: 11, fontWeight: '600', textAlign: 'center', marginTop: 2 },
+  calendarCard: { backgroundColor: '#ffffff', borderRadius: 12, borderWidth: 1, borderColor: '#e5e7eb', overflow: 'hidden' },
+  weekRow: { flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: '#e5e7eb', paddingVertical: 7 },
+  weekday: { width: '14.2857%', textAlign: 'center', color: '#6b7280', fontSize: 12, fontWeight: '700' },
+  daysGrid: { flexDirection: 'row', flexWrap: 'wrap' },
+  dayCell: { width: '14.2857%', height: 52, borderRightWidth: 1, borderBottomWidth: 1, borderColor: '#f0f1f2', alignItems: 'center', paddingTop: 6 },
+  dayCellSelected: { backgroundColor: '#eff9ea' },
+  dayNumber: { color: '#111827', fontSize: 13, fontWeight: '600' },
+  dayNumberOutside: { color: '#b6bbc3' },
+  dayNumberToday: { color: '#3d7a30', fontWeight: '900' },
+  eventDots: { flexDirection: 'row', gap: 2, marginTop: 5 },
+  eventDot: { width: 5, height: 5, borderRadius: 3 },
+  agendaCard: { backgroundColor: '#ffffff', borderRadius: 12, borderWidth: 1, borderColor: '#e5e7eb', padding: 12, gap: 8 },
+  agendaHeader: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 8 },
+  agendaTitle: { color: '#111827', fontSize: 16, fontWeight: '700' },
+  agendaCount: { color: '#6b7280', fontSize: 12, marginTop: 2 },
+  addButton: { backgroundColor: PRIMARY, borderRadius: 8, minHeight: 36, paddingHorizontal: 11, alignItems: 'center', justifyContent: 'center' },
+  addButtonText: { color: '#ffffff', fontSize: 13, fontWeight: '700' },
+  eventRow: { minHeight: 62, flexDirection: 'row', alignItems: 'stretch', borderWidth: 1, borderColor: '#e5e7eb', borderRadius: 9, overflow: 'hidden' },
+  colorBar: { width: 5 },
+  eventMain: { flex: 1, padding: 9 },
+  eventTime: { color: '#3d7a30', fontSize: 12, fontWeight: '700' },
+  eventName: { color: '#111827', fontSize: 14, fontWeight: '700' },
+  eventProject: { color: '#6b7280', fontSize: 12, marginTop: 2 },
+  arrow: { alignSelf: 'center', color: '#9ca3af', fontSize: 24, paddingRight: 9 },
+  empty: { color: '#6b7280', fontSize: 13, paddingVertical: 8 },
+  error: { color: '#dc2626', fontSize: 13 },
+  loader: { paddingVertical: 12 },
+});

mobile/app/more/event/[id].tsx

@@ -0,0 +1,137 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { ActivityIndicator, Pressable, RefreshControl, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useLocalSearchParams } from 'expo-router';
+import * as WebBrowser from 'expo-web-browser';
+
+import { HistorySection } from '@/components/history-section';
+import { CalendarEvent, fetchEventById } from '@/src/lib/api';
+import { useAuth } from '@/src/providers/auth-provider';
+
+const PRIMARY = '#69c350';
+
+function formatDateTime(value: unknown): string {
+  if (!value) return '-';
+  const date = new Date(String(value));
+  if (Number.isNaN(date.getTime())) return String(value);
+  return date.toLocaleString('de-DE', {
+    weekday: 'short',
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+function relationName(value: unknown): string {
+  if (!value) return '-';
+  if (typeof value === 'object') {
+    const relation = value as { id?: number | string; name?: string };
+    return String(relation.name || relation.id || '-');
+  }
+  return String(value);
+}
+
+export default function EventDetailScreen() {
+  const params = useLocalSearchParams<{ id?: string }>();
+  const eventId = Number(params.id);
+  const { token } = useAuth();
+  const [event, setEvent] = useState<CalendarEvent | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const validId = useMemo(() => Number.isFinite(eventId) && eventId > 0, [eventId]);
+
+  const load = useCallback(async (showSpinner = true) => {
+    if (!token || !validId) return;
+    if (showSpinner) setLoading(true);
+    setError(null);
+    try {
+      setEvent(await fetchEventById(token, eventId));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Der Termin konnte nicht geladen werden.');
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  }, [eventId, token, validId]);
+
+  useEffect(() => {
+    void load(true);
+  }, [load]);
+
+  async function onRefresh() {
+    setRefreshing(true);
+    await load(false);
+  }
+
+  async function openLink() {
+    if (!event?.link) return;
+    const raw = String(event.link).trim();
+    const url = /^https?:\/\//i.test(raw) ? raw : `https://${raw}`;
+    await WebBrowser.openBrowserAsync(url, { controlsColor: PRIMARY, showTitle: true });
+  }
+
+  const rows = event
+    ? [
+        { label: 'Beginn', value: formatDateTime(event.startDate) },
+        { label: 'Ende', value: formatDateTime(event.endDate) },
+        { label: 'Projekt', value: relationName(event.project) },
+        { label: 'Kunde', value: relationName(event.customer) },
+        { label: 'Status', value: String(event.state || '-') },
+        { label: 'Wiederholung', value: String(event.repeatInterval || '-') },
+      ]
+    : [];
+
+  return (
+    <ScrollView
+      contentContainerStyle={styles.container}
+      refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}>
+      {error ? <Text style={styles.error}>{error}</Text> : null}
+      {loading ? (
+        <View style={styles.loadingBox}><ActivityIndicator /><Text style={styles.loadingText}>Termin wird geladen...</Text></View>
+      ) : null}
+      {!loading && event ? (
+        <>
+          <View style={styles.card}>
+            <View style={styles.headingRow}>
+              <View style={[styles.colorMark, { backgroundColor: event.color || PRIMARY }]} />
+              <Text style={styles.title}>{event.name}</Text>
+            </View>
+            <View style={styles.table}>
+              {rows.map((row) => (
+                <View key={row.label} style={styles.row}>
+                  <Text style={styles.label}>{row.label}</Text>
+                  <Text style={styles.value}>{row.value}</Text>
+                </View>
+              ))}
+            </View>
+            {event.notes ? <View style={styles.notesBox}><Text style={styles.notesLabel}>Notizen</Text><Text style={styles.notes}>{event.notes}</Text></View> : null}
+            {event.link ? <Pressable style={styles.linkButton} onPress={openLink}><Text style={styles.linkButtonText}>Link öffnen</Text></Pressable> : null}
+          </View>
+          <HistorySection resource="events" resourceId={eventId} />
+        </>
+      ) : null}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { padding: 16, gap: 12, backgroundColor: '#f9fafb' },
+  card: { backgroundColor: '#ffffff', borderRadius: 12, borderWidth: 1, borderColor: '#e5e7eb', padding: 12, gap: 10 },
+  headingRow: { flexDirection: 'row', alignItems: 'center', gap: 9 },
+  colorMark: { width: 6, height: 28, borderRadius: 3 },
+  title: { flex: 1, color: '#111827', fontSize: 19, fontWeight: '700' },
+  table: { borderWidth: 1, borderColor: '#e5e7eb', borderRadius: 10, overflow: 'hidden' },
+  row: { borderBottomWidth: 1, borderBottomColor: '#e5e7eb', paddingHorizontal: 10, paddingVertical: 8, gap: 2 },
+  label: { color: '#6b7280', fontSize: 12, textTransform: 'uppercase', fontWeight: '600' },
+  value: { color: '#111827', fontSize: 14, fontWeight: '500' },
+  notesBox: { borderWidth: 1, borderColor: '#e5e7eb', borderRadius: 10, padding: 10, backgroundColor: '#fafafa', gap: 4 },
+  notesLabel: { color: '#6b7280', fontSize: 12, fontWeight: '600', textTransform: 'uppercase' },
+  notes: { color: '#374151', fontSize: 14 },
+  linkButton: { backgroundColor: PRIMARY, borderRadius: 9, minHeight: 40, alignItems: 'center', justifyContent: 'center' },
+  linkButtonText: { color: '#ffffff', fontWeight: '700' },
+  loadingBox: { paddingVertical: 24, alignItems: 'center', gap: 8 },
+  loadingText: { color: '#6b7280' },
+  error: { color: '#dc2626', fontSize: 13 },
+});

mobile/app/more/events.tsx

@@ -0,0 +1,208 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  RefreshControl,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import { router } from 'expo-router';
+
+import { EventCreateModal } from '@/components/event-create-modal';
+import { CalendarEvent, fetchEvents, fetchProjects, Project } from '@/src/lib/api';
+import { useAuth } from '@/src/providers/auth-provider';
+
+const PRIMARY = '#69c350';
+
+function formatEventDate(event: CalendarEvent): string {
+  const start = new Date(event.startDate);
+  const end = event.endDate ? new Date(event.endDate) : null;
+  if (Number.isNaN(start.getTime())) return String(event.startDate || '-');
+
+  const date = start.toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit', month: '2-digit', year: 'numeric' });
+  const startTime = start.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
+  const endTime = end && !Number.isNaN(end.getTime())
+    ? end.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })
+    : null;
+  return `${date} · ${startTime}${endTime ? `–${endTime}` : ''}`;
+}
+
+function projectName(event: CalendarEvent): string | null {
+  if (!event.project) return null;
+  if (typeof event.project === 'object') return event.project.name || (event.project.id ? `Projekt #${event.project.id}` : null);
+  return `Projekt #${event.project}`;
+}
+
+export default function EventsScreen() {
+  const { token } = useAuth();
+  const [events, setEvents] = useState<CalendarEvent[]>([]);
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [search, setSearch] = useState('');
+  const [showPast, setShowPast] = useState(false);
+  const [createOpen, setCreateOpen] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(async (showSpinner = true) => {
+    if (!token) return;
+    if (showSpinner) setLoading(true);
+    setError(null);
+    try {
+      const [eventRows, projectRows] = await Promise.all([fetchEvents(token), fetchProjects(token)]);
+      setEvents(eventRows);
+      setProjects(projectRows);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Termine konnten nicht geladen werden.');
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  }, [token]);
+
+  useEffect(() => {
+    void load(true);
+  }, [load]);
+
+  const visibleEvents = useMemo(() => {
+    const now = Date.now();
+    const terms = search.trim().toLowerCase().split(/\s+/).filter(Boolean);
+    return events
+      .filter((event) => showPast || new Date(event.endDate || event.startDate).getTime() >= now)
+      .filter((event) => {
+        if (terms.length === 0) return true;
+        const haystack = [event.name, event.notes, event.eventtype, projectName(event)]
+          .map((value) => String(value || '').toLowerCase())
+          .join(' ');
+        return terms.every((term) => haystack.includes(term));
+      })
+      .sort((a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime());
+  }, [events, search, showPast]);
+
+  async function onRefresh() {
+    setRefreshing(true);
+    await load(false);
+  }
+
+  return (
+    <View style={styles.screen}>
+      <View style={styles.toolbar}>
+        <TextInput
+          placeholder="Termine suchen"
+          placeholderTextColor="#9ca3af"
+          style={styles.searchInput}
+          value={search}
+          onChangeText={setSearch}
+        />
+        <View style={styles.toolbarActions}>
+          <Pressable
+            style={[styles.filterButton, showPast ? styles.filterButtonActive : null]}
+            onPress={() => setShowPast((value) => !value)}>
+            <Text style={[styles.filterButtonText, showPast ? styles.filterButtonTextActive : null]}>Vergangene anzeigen</Text>
+          </Pressable>
+          <Pressable style={styles.calendarButton} onPress={() => router.push('/more/calendar' as any)}>
+            <Text style={styles.calendarButtonText}>Kalender</Text>
+          </Pressable>
+        </View>
+      </View>
+
+      <ScrollView
+        style={styles.list}
+        contentContainerStyle={styles.listContent}
+        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}>
+        {error ? <Text style={styles.error}>{error}</Text> : null}
+        {loading ? (
+          <View style={styles.loadingBox}>
+            <ActivityIndicator />
+            <Text style={styles.loadingText}>Termine werden geladen...</Text>
+          </View>
+        ) : null}
+        {!loading && visibleEvents.length === 0 ? <Text style={styles.empty}>Keine Termine gefunden.</Text> : null}
+        {!loading
+          ? visibleEvents.map((event) => (
+              <Pressable
+                key={String(event.id)}
+                style={({ pressed }) => [styles.eventRow, pressed ? styles.eventRowPressed : null]}
+                onPress={() => router.push(`/more/event/${event.id}` as any)}>
+                <View style={[styles.colorBar, { backgroundColor: event.color || PRIMARY }]} />
+                <View style={styles.eventMain}>
+                  <Text style={styles.eventName}>{event.name}</Text>
+                  <Text style={styles.eventDate}>{formatEventDate(event)}</Text>
+                  {projectName(event) ? <Text style={styles.eventProject}>{projectName(event)}</Text> : null}
+                  {event.notes ? <Text style={styles.eventNotes} numberOfLines={2}>{String(event.notes)}</Text> : null}
+                </View>
+                <Text style={styles.arrow}>›</Text>
+              </Pressable>
+            ))
+          : null}
+      </ScrollView>
+
+      <Pressable style={styles.fab} onPress={() => setCreateOpen(true)}>
+        <Text style={styles.fabText}>+</Text>
+      </Pressable>
+
+      <EventCreateModal
+        visible={createOpen}
+        projects={projects}
+        onClose={() => setCreateOpen(false)}
+        onCreated={() => load(false)}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: { flex: 1, backgroundColor: '#ffffff' },
+  toolbar: { padding: 14, gap: 10, borderBottomWidth: 1, borderBottomColor: '#e5e7eb' },
+  searchInput: {
+    borderWidth: 1,
+    borderColor: '#d1d5db',
+    borderRadius: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 15,
+    color: '#111827',
+  },
+  toolbarActions: { flexDirection: 'row', justifyContent: 'space-between', gap: 8 },
+  filterButton: { borderWidth: 1, borderColor: '#d1d5db', borderRadius: 999, paddingHorizontal: 10, paddingVertical: 7 },
+  filterButtonActive: { borderColor: PRIMARY, backgroundColor: '#eff9ea' },
+  filterButtonText: { color: '#374151', fontSize: 12, fontWeight: '600' },
+  filterButtonTextActive: { color: '#3d7a30' },
+  calendarButton: { borderRadius: 8, backgroundColor: PRIMARY, paddingHorizontal: 13, paddingVertical: 7 },
+  calendarButtonText: { color: '#ffffff', fontSize: 13, fontWeight: '700' },
+  list: { flex: 1 },
+  listContent: { paddingBottom: 96 },
+  eventRow: { minHeight: 82, flexDirection: 'row', alignItems: 'stretch', borderBottomWidth: 1, borderBottomColor: '#e5e7eb' },
+  eventRowPressed: { backgroundColor: '#f3f4f6' },
+  colorBar: { width: 5 },
+  eventMain: { flex: 1, paddingHorizontal: 12, paddingVertical: 11, gap: 2 },
+  eventName: { color: '#111827', fontSize: 15, fontWeight: '700' },
+  eventDate: { color: '#374151', fontSize: 13 },
+  eventProject: { color: '#3d7a30', fontSize: 12, fontWeight: '600' },
+  eventNotes: { color: '#6b7280', fontSize: 12 },
+  arrow: { alignSelf: 'center', color: '#9ca3af', fontSize: 25, paddingRight: 12 },
+  loadingBox: { paddingVertical: 24, alignItems: 'center', gap: 8 },
+  loadingText: { color: '#6b7280' },
+  empty: { color: '#6b7280', textAlign: 'center', paddingVertical: 28 },
+  error: { color: '#dc2626', fontSize: 13, padding: 14 },
+  fab: {
+    position: 'absolute',
+    right: 18,
+    bottom: 20,
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    backgroundColor: PRIMARY,
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#111827',
+    shadowOpacity: 0.25,
+    shadowRadius: 8,
+    shadowOffset: { width: 0, height: 4 },
+    elevation: 5,
+  },
+  fabText: { color: '#ffffff', fontSize: 30, lineHeight: 30, marginTop: -2 },
+});

mobile/app/project/[id].tsx

@@ -17,10 +17,13 @@ import * as DocumentPicker from 'expo-document-picker';
 import * as ImagePicker from 'expo-image-picker';
 import * as WebBrowser from 'expo-web-browser';
 
+import { EventCreateModal } from '@/components/event-create-modal';
 import { HistorySection } from '@/components/history-section';
 import {
+  CalendarEvent,
   createProjectTask,
   fetchProjectById,
+  fetchProjectEvents,
   fetchProjectFiles,
   fetchProjectTasks,
   Project,
@@ -70,12 +73,14 @@ export default function ProjectDetailScreen() {
   const [project, setProject] = useState<Project | null>(null);
   const [files, setFiles] = useState<ProjectFile[]>([]);
   const [tasks, setTasks] = useState<Task[]>([]);
+  const [events, setEvents] = useState<CalendarEvent[]>([]);
   const [loading, setLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
   const [uploading, setUploading] = useState(false);
   const [creatingTask, setCreatingTask] = useState(false);
   const [updatingTaskId, setUpdatingTaskId] = useState<number | null>(null);
   const [createTaskModalOpen, setCreateTaskModalOpen] = useState(false);
+  const [createEventModalOpen, setCreateEventModalOpen] = useState(false);
   const [createTaskError, setCreateTaskError] = useState<string | null>(null);
   const [newTaskName, setNewTaskName] = useState('');
   const [newTaskDescription, setNewTaskDescription] = useState('');
@@ -122,14 +127,16 @@ export default function ProjectDetailScreen() {
     setError(null);
 
     try {
-      const [projectData, fileData, taskData] = await Promise.all([
+      const [projectData, fileData, taskData, eventData] = await Promise.all([
         fetchProjectById(token, projectId),
         fetchProjectFiles(token, projectId),
         fetchProjectTasks(token, projectId),
+        fetchProjectEvents(token, projectId),
       ]);
       setProject(projectData);
       setFiles(fileData);
       setTasks(taskData);
+      setEvents(eventData.sort((a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime()));
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Projektdaten konnten nicht geladen werden.');
     } finally {
@@ -369,6 +376,35 @@ export default function ProjectDetailScreen() {
 
           <HistorySection resource="projects" resourceId={projectId} />
 
+          <View style={styles.card}>
+            <View style={styles.sectionHeader}>
+              <Text style={styles.sectionTitle}>Termine ({events.length})</Text>
+              <Pressable style={styles.smallPrimaryButton} onPress={() => setCreateEventModalOpen(true)}>
+                <Text style={styles.smallPrimaryButtonText}>Neuer Termin</Text>
+              </Pressable>
+            </View>
+            {events.length === 0 ? (
+              <Text style={styles.empty}>Keine Termine für dieses Projekt vorhanden.</Text>
+            ) : (
+              events.map((event) => (
+                <Pressable
+                  key={String(event.id)}
+                  style={styles.eventRow}
+                  onPress={() => router.push(`/more/event/${event.id}` as any)}>
+                  <View style={[styles.eventColor, { backgroundColor: event.color || PRIMARY }]} />
+                  <View style={styles.eventMain}>
+                    <Text style={styles.eventName}>{event.name}</Text>
+                    <Text style={styles.eventDate}>
+                      {formatDateTime(event.startDate)}
+                      {event.endDate ? ` – ${formatDateTime(event.endDate)}` : ''}
+                    </Text>
+                  </View>
+                  <Text style={styles.eventArrow}>›</Text>
+                </Pressable>
+              ))
+            )}
+          </View>
+
           <View style={styles.card}>
             <View style={styles.sectionHeader}>
               <Text style={styles.sectionTitle}>Aufgaben ({tasks.length})</Text>
@@ -508,6 +544,14 @@ export default function ProjectDetailScreen() {
           </KeyboardAvoidingView>
         </View>
       </Modal>
+
+      <EventCreateModal
+        visible={createEventModalOpen}
+        projects={project ? [project] : []}
+        initialProjectId={projectId}
+        onClose={() => setCreateEventModalOpen(false)}
+        onCreated={() => load(false)}
+      />
     </ScrollView>
   );
 }
@@ -591,6 +635,38 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: '700',
   },
+  eventRow: {
+    minHeight: 60,
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    borderWidth: 1,
+    borderColor: '#e5e7eb',
+    borderRadius: 9,
+    overflow: 'hidden',
+  },
+  eventColor: {
+    width: 5,
+  },
+  eventMain: {
+    flex: 1,
+    padding: 9,
+    gap: 2,
+  },
+  eventName: {
+    color: '#111827',
+    fontSize: 14,
+    fontWeight: '700',
+  },
+  eventDate: {
+    color: '#6b7280',
+    fontSize: 12,
+  },
+  eventArrow: {
+    alignSelf: 'center',
+    color: '#9ca3af',
+    fontSize: 24,
+    paddingRight: 9,
+  },
   sectionHeaderActions: {
     alignItems: 'flex-end',
     gap: 8,

mobile/components/event-create-modal.tsx

@@ -0,0 +1,377 @@
+import { useEffect, useMemo, useState } from 'react';
+import {
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+
+import { CalendarEvent, createEvent, Project } from '@/src/lib/api';
+import { useAuth } from '@/src/providers/auth-provider';
+
+const PRIMARY = '#69c350';
+
+type EventCreateModalProps = {
+  visible: boolean;
+  projects?: Project[];
+  initialProjectId?: number | null;
+  initialDate?: Date | null;
+  onClose: () => void;
+  onCreated: (event: CalendarEvent) => void | Promise<void>;
+};
+
+function pad(value: number): string {
+  return String(value).padStart(2, '0');
+}
+
+function formatDateInput(date: Date): string {
+  return `${pad(date.getDate())}.${pad(date.getMonth() + 1)}.${date.getFullYear()}`;
+}
+
+function formatTimeInput(date: Date): string {
+  return `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+
+function createDefaults(initialDate?: Date | null) {
+  const start = initialDate ? new Date(initialDate) : new Date();
+  if (!initialDate) {
+    start.setMinutes(Math.ceil(start.getMinutes() / 15) * 15, 0, 0);
+  } else {
+    start.setHours(9, 0, 0, 0);
+  }
+  const end = new Date(start.getTime() + 60 * 60 * 1000);
+  return {
+    startDate: formatDateInput(start),
+    startTime: formatTimeInput(start),
+    endDate: formatDateInput(end),
+    endTime: formatTimeInput(end),
+  };
+}
+
+function parseLocalDate(dateValue: string, timeValue: string): Date | null {
+  const match = dateValue.trim().match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/);
+  const timeMatch = timeValue.trim().match(/^(\d{1,2}):(\d{2})$/);
+  if (!match || !timeMatch) return null;
+
+  const day = Number(match[1]);
+  const month = Number(match[2]);
+  const year = Number(match[3]);
+  const hours = Number(timeMatch[1]);
+  const minutes = Number(timeMatch[2]);
+  if (hours > 23 || minutes > 59) return null;
+
+  const date = new Date(year, month - 1, day, hours, minutes, 0, 0);
+  if (
+    date.getFullYear() !== year ||
+    date.getMonth() !== month - 1 ||
+    date.getDate() !== day
+  ) {
+    return null;
+  }
+  return date;
+}
+
+function relationId(value: unknown): number | null {
+  if (!value) return null;
+  if (typeof value === 'object') {
+    const id = (value as { id?: number | string }).id;
+    return id ? Number(id) : null;
+  }
+  const id = Number(value);
+  return Number.isFinite(id) ? id : null;
+}
+
+export function EventCreateModal({
+  visible,
+  projects = [],
+  initialProjectId = null,
+  initialDate = null,
+  onClose,
+  onCreated,
+}: EventCreateModalProps) {
+  const { token } = useAuth();
+  const [name, setName] = useState('');
+  const [notes, setNotes] = useState('');
+  const [link, setLink] = useState('');
+  const [startDate, setStartDate] = useState('');
+  const [startTime, setStartTime] = useState('');
+  const [endDate, setEndDate] = useState('');
+  const [endTime, setEndTime] = useState('');
+  const [selectedProjectId, setSelectedProjectId] = useState<number | null>(initialProjectId);
+  const [projectSearch, setProjectSearch] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!visible) return;
+    const defaults = createDefaults(initialDate);
+    setName('');
+    setNotes('');
+    setLink('');
+    setStartDate(defaults.startDate);
+    setStartTime(defaults.startTime);
+    setEndDate(defaults.endDate);
+    setEndTime(defaults.endTime);
+    setSelectedProjectId(initialProjectId);
+    setProjectSearch('');
+    setError(null);
+  }, [initialDate, initialProjectId, visible]);
+
+  const selectedProject = useMemo(
+    () => projects.find((project) => Number(project.id) === selectedProjectId) || null,
+    [projects, selectedProjectId]
+  );
+
+  const projectOptions = useMemo(() => {
+    const terms = projectSearch.trim().toLowerCase().split(/\s+/).filter(Boolean);
+    return projects
+      .filter((project) => {
+        if (terms.length === 0) return true;
+        const haystack = `${project.name || ''} ${project.projectNumber || ''}`.toLowerCase();
+        return terms.every((term) => haystack.includes(term));
+      })
+      .slice(0, 8);
+  }, [projectSearch, projects]);
+
+  async function save() {
+    if (!token || saving) return;
+    const title = name.trim();
+    if (!title) {
+      setError('Bitte einen Namen für den Termin eingeben.');
+      return;
+    }
+
+    const start = parseLocalDate(startDate, startTime);
+    const end = parseLocalDate(endDate, endTime);
+    if (!start || !end) {
+      setError('Bitte Datum und Uhrzeit im angegebenen Format eingeben.');
+      return;
+    }
+    if (end <= start) {
+      setError('Das Ende muss nach dem Beginn liegen.');
+      return;
+    }
+
+    setSaving(true);
+    setError(null);
+    try {
+      const event = await createEvent(token, {
+        name: title,
+        startDate: start.toISOString(),
+        endDate: end.toISOString(),
+        project: selectedProjectId,
+        customer: relationId(selectedProject?.customer),
+        notes: notes.trim() || null,
+        link: link.trim() || null,
+        state: 'Final',
+        repeatInterval: 'Keine Wiederholung',
+      });
+      await onCreated(event);
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Der Termin konnte nicht gespeichert werden.');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
+      <View style={styles.overlay}>
+        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.keyboardWrap}>
+          <View style={styles.card}>
+            <Text style={styles.title}>Neuer Termin</Text>
+            <ScrollView style={styles.scroll} contentContainerStyle={styles.form} keyboardShouldPersistTaps="handled">
+              <TextInput
+                autoFocus
+                placeholder="Name *"
+                placeholderTextColor="#9ca3af"
+                style={styles.input}
+                value={name}
+                onChangeText={setName}
+              />
+
+              <Text style={styles.label}>Beginn</Text>
+              <View style={styles.row}>
+                <TextInput
+                  placeholder="TT.MM.JJJJ"
+                  placeholderTextColor="#9ca3af"
+                  style={[styles.input, styles.dateInput]}
+                  value={startDate}
+                  onChangeText={setStartDate}
+                  keyboardType="numbers-and-punctuation"
+                />
+                <TextInput
+                  placeholder="HH:MM"
+                  placeholderTextColor="#9ca3af"
+                  style={[styles.input, styles.timeInput]}
+                  value={startTime}
+                  onChangeText={setStartTime}
+                  keyboardType="numbers-and-punctuation"
+                />
+              </View>
+
+              <Text style={styles.label}>Ende</Text>
+              <View style={styles.row}>
+                <TextInput
+                  placeholder="TT.MM.JJJJ"
+                  placeholderTextColor="#9ca3af"
+                  style={[styles.input, styles.dateInput]}
+                  value={endDate}
+                  onChangeText={setEndDate}
+                  keyboardType="numbers-and-punctuation"
+                />
+                <TextInput
+                  placeholder="HH:MM"
+                  placeholderTextColor="#9ca3af"
+                  style={[styles.input, styles.timeInput]}
+                  value={endTime}
+                  onChangeText={setEndTime}
+                  keyboardType="numbers-and-punctuation"
+                />
+              </View>
+
+              <Text style={styles.label}>Projekt</Text>
+              {selectedProject ? (
+                <View style={styles.selectedProject}>
+                  <View style={styles.selectedProjectMain}>
+                    <Text style={styles.selectedProjectName}>{selectedProject.name}</Text>
+                    {selectedProject.projectNumber ? (
+                      <Text style={styles.selectedProjectNumber}>Nr. {selectedProject.projectNumber}</Text>
+                    ) : null}
+                  </View>
+                  <Pressable onPress={() => setSelectedProjectId(null)}>
+                    <Text style={styles.removeProject}>Ändern</Text>
+                  </Pressable>
+                </View>
+              ) : (
+                <>
+                  <TextInput
+                    placeholder="Projekt suchen (optional)"
+                    placeholderTextColor="#9ca3af"
+                    style={styles.input}
+                    value={projectSearch}
+                    onChangeText={setProjectSearch}
+                  />
+                  {projectOptions.map((project) => (
+                    <Pressable
+                      key={String(project.id)}
+                      style={styles.projectOption}
+                      onPress={() => setSelectedProjectId(Number(project.id))}>
+                      <Text style={styles.projectOptionName}>{project.name}</Text>
+                      <Text style={styles.projectOptionNumber}>{project.projectNumber || `#${project.id}`}</Text>
+                    </Pressable>
+                  ))}
+                </>
+              )}
+
+              <TextInput
+                placeholder="Link (optional)"
+                placeholderTextColor="#9ca3af"
+                style={styles.input}
+                value={link}
+                onChangeText={setLink}
+                autoCapitalize="none"
+                keyboardType="url"
+              />
+              <TextInput
+                placeholder="Notizen (optional)"
+                placeholderTextColor="#9ca3af"
+                style={[styles.input, styles.multiline]}
+                value={notes}
+                onChangeText={setNotes}
+                multiline
+              />
+              {error ? <Text style={styles.error}>{error}</Text> : null}
+            </ScrollView>
+
+            <View style={styles.actions}>
+              <Pressable style={styles.secondaryButton} onPress={onClose} disabled={saving}>
+                <Text style={styles.secondaryButtonText}>Abbrechen</Text>
+              </Pressable>
+              <Pressable style={[styles.primaryButton, saving ? styles.disabled : null]} onPress={save} disabled={saving}>
+                <Text style={styles.primaryButtonText}>{saving ? 'Speichere...' : 'Anlegen'}</Text>
+              </Pressable>
+            </View>
+          </View>
+        </KeyboardAvoidingView>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: { flex: 1, backgroundColor: 'rgba(17, 24, 39, 0.45)', justifyContent: 'center', padding: 20 },
+  keyboardWrap: { width: '100%' },
+  card: { maxHeight: '92%', backgroundColor: '#ffffff', borderRadius: 14, padding: 16, gap: 12 },
+  title: { color: '#111827', fontSize: 18, fontWeight: '700' },
+  scroll: { flexShrink: 1 },
+  form: { gap: 10, paddingBottom: 4 },
+  label: { color: '#374151', fontSize: 13, fontWeight: '700' },
+  input: {
+    borderWidth: 1,
+    borderColor: '#d1d5db',
+    borderRadius: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 15,
+    color: '#111827',
+    backgroundColor: '#ffffff',
+  },
+  row: { flexDirection: 'row', gap: 8 },
+  dateInput: { flex: 1 },
+  timeInput: { width: 92 },
+  multiline: { minHeight: 90, textAlignVertical: 'top' },
+  selectedProject: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderWidth: 1,
+    borderColor: '#b9e3ae',
+    backgroundColor: '#eff9ea',
+    borderRadius: 10,
+    padding: 10,
+    gap: 8,
+  },
+  selectedProjectMain: { flex: 1 },
+  selectedProjectName: { color: '#111827', fontSize: 14, fontWeight: '700' },
+  selectedProjectNumber: { color: '#6b7280', fontSize: 12 },
+  removeProject: { color: '#3d7a30', fontSize: 13, fontWeight: '700' },
+  projectOption: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    borderBottomWidth: 1,
+    borderBottomColor: '#e5e7eb',
+    paddingVertical: 8,
+    gap: 8,
+  },
+  projectOptionName: { flex: 1, color: '#111827', fontSize: 14, fontWeight: '600' },
+  projectOptionNumber: { color: '#6b7280', fontSize: 12 },
+  error: { color: '#dc2626', fontSize: 13 },
+  actions: { flexDirection: 'row', justifyContent: 'flex-end', gap: 8 },
+  secondaryButton: {
+    minHeight: 40,
+    borderWidth: 1,
+    borderColor: '#d1d5db',
+    borderRadius: 10,
+    paddingHorizontal: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  secondaryButtonText: { color: '#374151', fontWeight: '600' },
+  primaryButton: {
+    minHeight: 40,
+    borderRadius: 10,
+    paddingHorizontal: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: PRIMARY,
+  },
+  primaryButtonText: { color: '#ffffff', fontWeight: '700' },
+  disabled: { opacity: 0.6 },
+});

mobile/src/lib/api.ts

@@ -54,6 +54,23 @@ export type Project = {
   [key: string]: unknown;
 };
 
+export type CalendarEvent = {
+  id: number;
+  name: string;
+  startDate: string;
+  endDate?: string | null;
+  eventtype?: string | null;
+  state?: string | null;
+  repeatInterval?: string | null;
+  project?: number | { id?: number; name?: string } | null;
+  customer?: number | { id?: number; name?: string } | null;
+  notes?: string | null;
+  link?: string | null;
+  color?: string | null;
+  archived?: boolean;
+  [key: string]: unknown;
+};
+
 export type ProjectFile = {
   id: string;
   name?: string | null;
@@ -886,6 +903,49 @@ export async function createProject(
   });
 }
 
+export async function fetchEvents(token: string, includeArchived = false): Promise<CalendarEvent[]> {
+  const events = await apiRequest<CalendarEvent[]>('/api/resource/events', { token });
+  if (includeArchived) return events || [];
+  return (events || []).filter((event) => !event.archived);
+}
+
+export async function createEvent(
+  token: string,
+  payload: {
+    name: string;
+    startDate: string;
+    endDate: string;
+    project?: number | null;
+    customer?: number | null;
+    notes?: string | null;
+    link?: string | null;
+    eventtype?: string;
+    state?: 'Entwurf' | 'Final';
+    repeatInterval?: string;
+  }
+): Promise<CalendarEvent> {
+  return apiRequest<CalendarEvent>('/api/resource/events', {
+    method: 'POST',
+    token,
+    body: payload,
+  });
+}
+
+export async function fetchEventById(token: string, eventId: number): Promise<CalendarEvent> {
+  return apiRequest<CalendarEvent>(`/api/resource/events/${eventId}`, { token });
+}
+
+function resolveEventProjectId(event: CalendarEvent): number | null {
+  if (!event.project) return null;
+  if (typeof event.project === 'object') return event.project.id ? Number(event.project.id) : null;
+  return Number(event.project);
+}
+
+export async function fetchProjectEvents(token: string, projectId: number): Promise<CalendarEvent[]> {
+  const events = await fetchEvents(token);
+  return events.filter((event) => resolveEventProjectId(event) === Number(projectId));
+}
+
 export async function fetchCustomers(token: string, includeArchived = false): Promise<Customer[]> {
   const customers = await apiRequest<Customer[]>('/api/resource/customers', { token });
   if (includeArchived) return customers || [];