Mobile Dev

mobile/app/(tabs)/projects.tsx

@@ -0,0 +1,533 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  Pressable,
+  RefreshControl,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import { router } from 'expo-router';
+
+import { createProject, Customer, fetchCustomers, fetchPlants, fetchProjects, Plant, Project } from '@/src/lib/api';
+import { useAuth } from '@/src/providers/auth-provider';
+
+const PRIMARY = '#69c350';
+
+function getProjectLine(project: Project): string {
+  if (project.projectNumber) return `${project.name} · ${project.projectNumber}`;
+  return project.name;
+}
+
+function getActivePhaseLabel(project: Project): string {
+  const explicit = String(project.active_phase || '').trim();
+  if (explicit) return explicit;
+
+  const phases = Array.isArray(project.phases) ? project.phases : [];
+  const active = phases.find((phase: any) => phase?.active);
+  return String(active?.label || '').trim();
+}
+
+function isProjectCompletedByPhase(project: Project): boolean {
+  const phase = getActivePhaseLabel(project).toLowerCase();
+  return phase === 'abgeschlossen';
+}
+
+export default function ProjectsScreen() {
+  const { token } = useAuth();
+
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [customers, setCustomers] = useState<Customer[]>([]);
+  const [plants, setPlants] = useState<Plant[]>([]);
+
+  const [search, setSearch] = useState('');
+  const [showArchived, setShowArchived] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const [createOpen, setCreateOpen] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [createError, setCreateError] = useState<string | null>(null);
+  const [nameInput, setNameInput] = useState('');
+  const [projectNumberInput, setProjectNumberInput] = useState('');
+  const [notesInput, setNotesInput] = useState('');
+  const [selectedCustomerId, setSelectedCustomerId] = useState<number | null>(null);
+  const [selectedPlantId, setSelectedPlantId] = useState<number | null>(null);
+
+  const [pickerMode, setPickerMode] = useState<'customer' | 'plant' | null>(null);
+  const [customerSearch, setCustomerSearch] = useState('');
+  const [plantSearch, setPlantSearch] = useState('');
+
+  const filteredProjects = useMemo(() => {
+    const terms = search
+      .trim()
+      .toLowerCase()
+      .split(/\s+/)
+      .filter(Boolean);
+
+    return projects.filter((project) => {
+      if (!showArchived && isProjectCompletedByPhase(project)) return false;
+      if (terms.length === 0) return true;
+
+      const haystack = [
+        project.name,
+        project.projectNumber,
+        project.notes,
+        project.customerRef,
+        project.active_phase,
+        getActivePhaseLabel(project),
+      ]
+        .map((value) => String(value || '').toLowerCase())
+        .join(' ');
+
+      return terms.every((term) => haystack.includes(term));
+    });
+  }, [projects, search, showArchived]);
+
+  const selectedCustomerLabel = useMemo(() => {
+    if (!selectedCustomerId) return 'Kunde auswählen (optional)';
+    const customer = customers.find((item) => Number(item.id) === selectedCustomerId);
+    return customer ? `${customer.name}${customer.customerNumber ? ` · ${customer.customerNumber}` : ''}` : `ID ${selectedCustomerId}`;
+  }, [customers, selectedCustomerId]);
+
+  const selectedPlantLabel = useMemo(() => {
+    if (!selectedPlantId) return 'Objekt auswählen (optional)';
+    const plant = plants.find((item) => Number(item.id) === selectedPlantId);
+    return plant ? plant.name : `ID ${selectedPlantId}`;
+  }, [plants, selectedPlantId]);
+
+  const filteredCustomerOptions = useMemo(() => {
+    const terms = customerSearch.trim().toLowerCase().split(/\s+/).filter(Boolean);
+    return customers
+      .filter((customer) => !customer.archived)
+      .filter((customer) => {
+        if (terms.length === 0) return true;
+        const haystack = [customer.name, customer.customerNumber]
+          .map((value) => String(value || '').toLowerCase())
+          .join(' ');
+        return terms.every((term) => haystack.includes(term));
+      });
+  }, [customerSearch, customers]);
+
+  const filteredPlantOptions = useMemo(() => {
+    const terms = plantSearch.trim().toLowerCase().split(/\s+/).filter(Boolean);
+    return plants
+      .filter((plant) => !plant.archived)
+      .filter((plant) => {
+        if (terms.length === 0) return true;
+        const haystack = [plant.name, plant.description]
+          .map((value) => String(value || '').toLowerCase())
+          .join(' ');
+        return terms.every((term) => haystack.includes(term));
+      });
+  }, [plantSearch, plants]);
+
+  const loadProjects = useCallback(async (showSpinner = true) => {
+    if (!token) return;
+    if (showSpinner) setLoading(true);
+    setError(null);
+
+    try {
+      const [projectRows, customerRows, plantRows] = await Promise.all([
+        fetchProjects(token, true),
+        fetchCustomers(token, true),
+        fetchPlants(token, true),
+      ]);
+      setProjects(projectRows);
+      setCustomers(customerRows);
+      setPlants(plantRows);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Projekte konnten nicht geladen werden.');
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  }, [token]);
+
+  useEffect(() => {
+    if (!token) return;
+    void loadProjects(true);
+  }, [loadProjects, token]);
+
+  async function onRefresh() {
+    setRefreshing(true);
+    await loadProjects(false);
+  }
+
+  function closeCreateModal() {
+    setCreateOpen(false);
+    setCreateError(null);
+    setNameInput('');
+    setProjectNumberInput('');
+    setNotesInput('');
+    setSelectedCustomerId(null);
+    setSelectedPlantId(null);
+    setCustomerSearch('');
+    setPlantSearch('');
+    setPickerMode(null);
+  }
+
+  async function onCreateProject() {
+    if (!token) return;
+
+    const name = nameInput.trim();
+    if (!name) {
+      setCreateError('Bitte einen Projektnamen eingeben.');
+      return;
+    }
+
+    setSaving(true);
+    setCreateError(null);
+
+    try {
+      await createProject(token, {
+        name,
+        projectNumber: projectNumberInput.trim() || null,
+        customer: selectedCustomerId,
+        plant: selectedPlantId,
+        notes: notesInput.trim() || null,
+      });
+      closeCreateModal();
+      await loadProjects(false);
+    } catch (err) {
+      setCreateError(err instanceof Error ? err.message : 'Projekt konnte nicht erstellt werden.');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <View style={styles.screen}>
+      <View style={styles.searchWrap}>
+        <TextInput
+          placeholder="Projekte suchen"
+          placeholderTextColor="#9ca3af"
+          style={styles.searchInput}
+          value={search}
+          onChangeText={setSearch}
+        />
+        <Pressable
+          style={[styles.toggleButton, showArchived ? styles.toggleButtonActive : null]}
+          onPress={() => setShowArchived((prev) => !prev)}>
+          <Text style={[styles.toggleButtonText, showArchived ? styles.toggleButtonTextActive : null]}>
+            Abgeschlossene anzeigen
+          </Text>
+        </Pressable>
+      </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}>Projekte werden geladen...</Text>
+          </View>
+        ) : null}
+
+        {!loading && filteredProjects.length === 0 ? <Text style={styles.empty}>Keine Projekte gefunden.</Text> : null}
+
+        {!loading &&
+          filteredProjects.map((project) => (
+            <Pressable key={String(project.id)} style={styles.row} onPress={() => router.push(`/project/${project.id}`)}>
+              <View style={styles.rowHeader}>
+                <Text style={styles.rowTitle} numberOfLines={1}>{getProjectLine(project)}</Text>
+                {isProjectCompletedByPhase(project) ? <Text style={styles.archivedBadge}>Abgeschlossen</Text> : null}
+              </View>
+              {getActivePhaseLabel(project) ? (
+                <Text style={styles.phaseText} numberOfLines={1}>Phase: {getActivePhaseLabel(project)}</Text>
+              ) : null}
+              {project.notes ? <Text style={styles.rowSubtitle} numberOfLines={1}>{String(project.notes)}</Text> : null}
+            </Pressable>
+          ))}
+      </ScrollView>
+
+      <Pressable style={styles.fab} onPress={() => setCreateOpen(true)}>
+        <Text style={styles.fabText}>+</Text>
+      </Pressable>
+
+      <Modal visible={createOpen} 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}>Neues Projekt</Text>
+
+              <TextInput
+                placeholder="Projektname"
+                placeholderTextColor="#9ca3af"
+                style={styles.searchInput}
+                value={nameInput}
+                onChangeText={setNameInput}
+              />
+
+              <TextInput
+                placeholder="Projekt-Nr. (optional)"
+                placeholderTextColor="#9ca3af"
+                style={styles.searchInput}
+                value={projectNumberInput}
+                onChangeText={setProjectNumberInput}
+              />
+
+              <Pressable style={styles.selectButton} onPress={() => setPickerMode('customer')}>
+                <Text style={styles.selectButtonText} numberOfLines={1}>{selectedCustomerLabel}</Text>
+              </Pressable>
+
+              <Pressable style={styles.selectButton} onPress={() => setPickerMode('plant')}>
+                <Text style={styles.selectButtonText} numberOfLines={1}>{selectedPlantLabel}</Text>
+              </Pressable>
+
+              <TextInput
+                placeholder="Notizen (optional)"
+                placeholderTextColor="#9ca3af"
+                style={[styles.searchInput, styles.multilineInput]}
+                value={notesInput}
+                onChangeText={setNotesInput}
+                multiline
+              />
+
+              {pickerMode === 'customer' ? (
+                <View style={styles.inlinePickerBox}>
+                  <Text style={styles.inlinePickerTitle}>Kunde auswählen</Text>
+                  <TextInput
+                    placeholder="Kunden suchen"
+                    placeholderTextColor="#9ca3af"
+                    style={styles.searchInput}
+                    value={customerSearch}
+                    onChangeText={setCustomerSearch}
+                  />
+                  <ScrollView style={styles.pickerList}>
+                    <Pressable
+                      style={styles.pickerRow}
+                      onPress={() => {
+                        setSelectedCustomerId(null);
+                        setPickerMode(null);
+                      }}>
+                      <Text style={styles.pickerRowTitle}>Keine Auswahl</Text>
+                    </Pressable>
+                    {filteredCustomerOptions.map((customer) => (
+                      <Pressable
+                        key={String(customer.id)}
+                        style={styles.pickerRow}
+                        onPress={() => {
+                          setSelectedCustomerId(Number(customer.id));
+                          setPickerMode(null);
+                        }}>
+                        <Text style={styles.pickerRowTitle} numberOfLines={1}>{customer.name}</Text>
+                        <Text style={styles.pickerRowMeta} numberOfLines={1}>
+                          {customer.customerNumber ? `Nr. ${customer.customerNumber}` : `ID ${customer.id}`}
+                        </Text>
+                      </Pressable>
+                    ))}
+                  </ScrollView>
+                </View>
+              ) : null}
+
+              {pickerMode === 'plant' ? (
+                <View style={styles.inlinePickerBox}>
+                  <Text style={styles.inlinePickerTitle}>Objekt auswählen</Text>
+                  <TextInput
+                    placeholder="Objekte suchen"
+                    placeholderTextColor="#9ca3af"
+                    style={styles.searchInput}
+                    value={plantSearch}
+                    onChangeText={setPlantSearch}
+                  />
+                  <ScrollView style={styles.pickerList}>
+                    <Pressable
+                      style={styles.pickerRow}
+                      onPress={() => {
+                        setSelectedPlantId(null);
+                        setPickerMode(null);
+                      }}>
+                      <Text style={styles.pickerRowTitle}>Keine Auswahl</Text>
+                    </Pressable>
+                    {filteredPlantOptions.map((plant) => (
+                      <Pressable
+                        key={String(plant.id)}
+                        style={styles.pickerRow}
+                        onPress={() => {
+                          setSelectedPlantId(Number(plant.id));
+                          setPickerMode(null);
+                        }}>
+                        <Text style={styles.pickerRowTitle} numberOfLines={1}>{plant.name}</Text>
+                        <Text style={styles.pickerRowMeta} numberOfLines={1}>ID {plant.id}</Text>
+                      </Pressable>
+                    ))}
+                  </ScrollView>
+                </View>
+              ) : null}
+
+              {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={onCreateProject}
+                  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: '#ffffff' },
+  searchWrap: {
+    paddingHorizontal: 16,
+    paddingTop: 12,
+    paddingBottom: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e5e7eb',
+    backgroundColor: '#ffffff',
+    gap: 8,
+  },
+  searchInput: {
+    borderWidth: 1,
+    borderColor: '#d1d5db',
+    borderRadius: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 15,
+    color: '#111827',
+    backgroundColor: '#ffffff',
+  },
+  list: { flex: 1, backgroundColor: '#ffffff' },
+  listContent: { paddingBottom: 96 },
+  row: {
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e5e7eb',
+    backgroundColor: '#ffffff',
+  },
+  rowHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8,
+  },
+  rowTitle: { flex: 1, color: '#111827', fontSize: 15, fontWeight: '600' },
+  archivedBadge: {
+    color: '#3d7a30',
+    fontSize: 11,
+    fontWeight: '600',
+    backgroundColor: '#eff9ea',
+    borderRadius: 999,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    overflow: 'hidden',
+  },
+  rowSubtitle: { color: '#6b7280', fontSize: 13, marginTop: 2 },
+  phaseText: { color: '#6b7280', fontSize: 12, marginTop: 2 },
+  toggleButton: {
+    alignSelf: 'flex-start',
+    borderWidth: 1,
+    borderColor: '#d1d5db',
+    borderRadius: 999,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    backgroundColor: '#ffffff',
+  },
+  toggleButtonActive: { borderColor: PRIMARY, backgroundColor: '#eff9ea' },
+  toggleButtonText: { color: '#374151', fontSize: 12, fontWeight: '600' },
+  toggleButtonTextActive: { color: '#3d7a30' },
+  loadingBox: { paddingVertical: 20, alignItems: 'center', gap: 8 },
+  loadingText: { color: '#6b7280' },
+  empty: { color: '#6b7280', textAlign: 'center', paddingVertical: 20 },
+  error: { color: '#dc2626', fontSize: 13, paddingHorizontal: 16, paddingTop: 10 },
+  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 },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(17, 24, 39, 0.45)',
+    justifyContent: 'center',
+    padding: 20,
+  },
+  modalKeyboardWrap: { width: '100%' },
+  modalCard: { backgroundColor: '#ffffff', borderRadius: 14, padding: 16, gap: 10 },
+  modalTitle: { color: '#111827', fontSize: 18, fontWeight: '700' },
+  multilineInput: { minHeight: 92, textAlignVertical: 'top' },
+  selectButton: {
+    borderWidth: 1,
+    borderColor: '#d1d5db',
+    borderRadius: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    backgroundColor: '#ffffff',
+  },
+  selectButtonText: { color: '#111827', fontSize: 15 },
+  inlinePickerBox: {
+    borderWidth: 1,
+    borderColor: '#e5e7eb',
+    borderRadius: 10,
+    padding: 10,
+    gap: 8,
+    backgroundColor: '#fafafa',
+  },
+  inlinePickerTitle: { color: '#111827', fontSize: 14, fontWeight: '700' },
+  pickerList: { maxHeight: 220 },
+  pickerRow: {
+    borderWidth: 1,
+    borderColor: '#e5e7eb',
+    borderRadius: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    marginBottom: 8,
+    backgroundColor: '#ffffff',
+  },
+  pickerRowTitle: { color: '#111827', fontSize: 14, fontWeight: '600' },
+  pickerRowMeta: { color: '#6b7280', fontSize: 12, marginTop: 2 },
+  modalActions: { flexDirection: 'row', justifyContent: 'flex-end', gap: 8, marginTop: 4 },
+  secondaryButton: {
+    borderWidth: 1,
+    borderColor: '#d1d5db',
+    borderRadius: 10,
+    minHeight: 40,
+    paddingHorizontal: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  secondaryButtonText: { color: '#374151', fontWeight: '600' },
+  primaryButton: {
+    borderRadius: 10,
+    minHeight: 40,
+    paddingHorizontal: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: PRIMARY,
+  },
+  primaryButtonText: { color: '#ffffff', fontWeight: '700' },
+  buttonDisabled: { opacity: 0.6 },
+});