cập nhật modal CRUD thuyền viên trong trip

app/trip-crew.tsx

@@ -13,7 +13,7 @@ import { useLocalSearchParams, useRouter } from "expo-router";
 import { Ionicons } from "@expo/vector-icons";
 import { useI18n } from "@/hooks/use-i18n";
 import { useThemeContext } from "@/hooks/use-theme-context";
-import { queryTripCrew } from "@/controller/TripCrewController";
+import { queryTripCrew, deleteTripCrew } from "@/controller/TripCrewController";
 import CrewList from "@/components/diary/TripCrewModal/CrewList";
 import AddEditCrewModal from "@/components/diary/TripCrewModal/AddEditCrewModal";
 
@@ -21,7 +21,10 @@ export default function TripCrewPage() {
   const { t } = useI18n();
   const { colors } = useThemeContext();
   const router = useRouter();
-  const { tripId, tripName } = useLocalSearchParams<{ tripId: string; tripName?: string }>();
+  const { tripId, tripName } = useLocalSearchParams<{
+    tripId: string;
+    tripName?: string;
+  }>();
 
   // State
   const [loading, setLoading] = useState(false);
@@ -85,9 +88,16 @@ export default function TripCrewPage() {
           text: t("common.delete"),
           style: "destructive",
           onPress: async () => {
-            // TODO: Call delete API when available
+            try {
-            setCrews((prev) => prev.filter((c) => c.PersonalID !== crew.PersonalID));
+              // Call delete API
-            Alert.alert(t("common.success"), t("diary.crew.deleteSuccess"));
+              await deleteTripCrew(tripId, crew.PersonalID || "");
+              // Reload list
+              await fetchCrewData();
+              Alert.alert(t("common.success"), t("diary.crew.deleteSuccess"));
+            } catch (error) {
+              console.error("Error deleting crew:", error);
+              Alert.alert(t("common.error"), t("diary.crew.form.saveError"));
+            }
           },
         },
       ]
@@ -102,16 +112,25 @@ export default function TripCrewPage() {
 
   const themedStyles = {
     container: { backgroundColor: colors.background },
-    header: { backgroundColor: colors.card, borderBottomColor: colors.separator },
+    header: {
+      backgroundColor: colors.card,
+      borderBottomColor: colors.separator,
+    },
     title: { color: colors.text },
     subtitle: { color: colors.textSecondary },
   };
 
   return (
-    <SafeAreaView style={[styles.container, themedStyles.container]} edges={["top"]}>
+    <SafeAreaView
+      style={[styles.container, themedStyles.container]}
+      edges={["top"]}
+    >
       {/* Header */}
       <View style={[styles.header, themedStyles.header]}>
-        <TouchableOpacity onPress={() => router.back()} style={styles.backButton}>
+        <TouchableOpacity
+          onPress={() => router.back()}
+          style={styles.backButton}
+        >
           <Ionicons name="arrow-back" size={24} color={colors.text} />
         </TouchableOpacity>
         <View style={styles.headerTitles}>
@@ -119,7 +138,10 @@ export default function TripCrewPage() {
             {t("diary.crew.title")}
           </Text>
           {tripName && (
-            <Text style={[styles.subtitle, themedStyles.subtitle]} numberOfLines={1}>
+            <Text
+              style={[styles.subtitle, themedStyles.subtitle]}
+              numberOfLines={1}
+            >
               {tripName}
             </Text>
           )}
@@ -140,8 +162,14 @@ export default function TripCrewPage() {
           </View>
         ) : error ? (
           <View style={styles.errorContainer}>
-            <Ionicons name="alert-circle-outline" size={48} color={colors.error || "#FF3B30"} />
+            <Ionicons
-            <Text style={[styles.errorText, { color: colors.error || "#FF3B30" }]}>
+              name="alert-circle-outline"
+              size={48}
+              color={colors.error || "#FF3B30"}
+            />
+            <Text
+              style={[styles.errorText, { color: colors.error || "#FF3B30" }]}
+            >
               {error}
             </Text>
             <TouchableOpacity
@@ -152,12 +180,21 @@ export default function TripCrewPage() {
             </TouchableOpacity>
           </View>
         ) : (
-          <CrewList crews={crews} onEdit={handleEditCrew} onDelete={handleDeleteCrew} />
+          <CrewList
+            crews={crews}
+            onEdit={handleEditCrew}
+            onDelete={handleDeleteCrew}
+          />
         )}
       </View>
 
       {/* Footer - Crew count */}
-      <View style={[styles.footer, { backgroundColor: colors.card, borderTopColor: colors.separator }]}>
+      <View
+        style={[
+          styles.footer,
+          { backgroundColor: colors.card, borderTopColor: colors.separator },
+        ]}
+      >
         <View style={styles.countContainer}>
           <Ionicons name="people-outline" size={20} color={colors.primary} />
           <Text style={[styles.countText, { color: colors.text }]}>
@@ -175,6 +212,8 @@ export default function TripCrewPage() {
         }}
         onSave={handleSaveCrew}
         mode={editingCrew ? "edit" : "add"}
+        tripId={tripId}
+        existingCrewIds={crews.map((c) => c.PersonalID || "")}
         initialData={
           editingCrew
             ? {
@@ -184,7 +223,8 @@ export default function TripCrewPage() {
                 email: editingCrew.Person?.email || "",
                 address: editingCrew.Person?.address || "",
                 role: editingCrew.role || "crew",
-                note: editingCrew.note || "",
+                // Note lấy từ trip (ghi chú chuyến đi), fallback về note từ Person
+                note: editingCrew.note || editingCrew.Person?.note || "",
               }
             : undefined
         }
@@ -218,12 +258,20 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "700",
-    fontFamily: Platform.select({ ios: "System", android: "Roboto", default: "System" }),
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
   },
   subtitle: {
     fontSize: 13,
     marginTop: 2,
-    fontFamily: Platform.select({ ios: "System", android: "Roboto", default: "System" }),
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
   },
   content: {
     flex: 1,
@@ -237,7 +285,11 @@ const styles = StyleSheet.create({
   },
   loadingText: {
     fontSize: 14,
-    fontFamily: Platform.select({ ios: "System", android: "Roboto", default: "System" }),
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
   },
   errorContainer: {
     flex: 1,
@@ -249,7 +301,11 @@ const styles = StyleSheet.create({
   errorText: {
     fontSize: 14,
     textAlign: "center",
-    fontFamily: Platform.select({ ios: "System", android: "Roboto", default: "System" }),
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
   },
   retryButton: {
     marginTop: 8,
@@ -261,7 +317,11 @@ const styles = StyleSheet.create({
     color: "#FFFFFF",
     fontSize: 14,
     fontWeight: "600",
-    fontFamily: Platform.select({ ios: "System", android: "Roboto", default: "System" }),
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
   },
   footer: {
     borderTopWidth: 1,
@@ -278,6 +338,10 @@ const styles = StyleSheet.create({
   countText: {
     fontSize: 14,
     fontWeight: "600",
-    fontFamily: Platform.select({ ios: "System", android: "Roboto", default: "System" }),
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
   },
 });

components/diary/TripCrewModal/AddEditCrewModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef, useCallback } from "react";
 import {
   View,
   Text,
@@ -12,10 +12,23 @@ import {
   Animated,
   Dimensions,
   Alert,
+  Image,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { useI18n } from "@/hooks/use-i18n";
 import { useThemeContext } from "@/hooks/use-theme-context";
+import {
+  searchCrew,
+  newTripCrew,
+  updateTripCrew,
+} from "@/controller/TripCrewController";
+import {
+  newCrew,
+  updateCrewInfo,
+  queryCrewImage,
+} from "@/controller/CrewController";
+import * as ImagePicker from "expo-image-picker";
+import { Buffer } from "buffer";
 
 interface CrewFormData {
   personalId: string;
@@ -33,9 +46,12 @@ interface AddEditCrewModalProps {
   onSave: (data: CrewFormData) => Promise<void>;
   mode: "add" | "edit";
   initialData?: Partial<CrewFormData>;
+  tripId?: string; // Required for add mode to add crew to trip
+  existingCrewIds?: string[]; // List of existing crew IDs in trip
 }
 
-const ROLES = ["captain", "crew", "engineer", "cook"];
+const ROLES = ["captain", "crew"];
+const DEBOUNCE_DELAY = 1000; // 3 seconds debounce
 
 export default function AddEditCrewModal({
   visible,
@@ -43,13 +59,17 @@ export default function AddEditCrewModal({
   onSave,
   mode,
   initialData,
+  tripId,
+  existingCrewIds = [],
 }: AddEditCrewModalProps) {
   const { t } = useI18n();
   const { colors } = useThemeContext();
 
   // Animation values
   const fadeAnim = useState(new Animated.Value(0))[0];
-  const slideAnim = useState(new Animated.Value(Dimensions.get("window").height))[0];
+  const slideAnim = useState(
+    new Animated.Value(Dimensions.get("window").height)
+  )[0];
 
   // Form state
   const [formData, setFormData] = useState<CrewFormData>({
@@ -62,6 +82,21 @@ export default function AddEditCrewModal({
     note: "",
   });
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSearching, setIsSearching] = useState(false);
+  const [isWaitingDebounce, setIsWaitingDebounce] = useState(false);
+  const [searchStatus, setSearchStatus] = useState<
+    "idle" | "found" | "not_found" | "error"
+  >("idle");
+  const [foundPersonData, setFoundPersonData] =
+    useState<Model.TripCrewPerson | null>(null);
+
+  // State quản lý ảnh thuyền viên
+  const [imageUri, setImageUri] = useState<string | null>(null);
+  const [newImageUri, setNewImageUri] = useState<string | null>(null);
+  const [isLoadingImage, setIsLoadingImage] = useState(false);
+
+  // Debounce timer ref
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   // Pre-fill form when editing
   useEffect(() => {
@@ -75,6 +110,11 @@ export default function AddEditCrewModal({
         role: initialData.role || "crew",
         note: initialData.note || "",
       });
+      setSearchStatus("idle");
+      setFoundPersonData(null);
+      // Reset ảnh khi mở modal edit
+      setNewImageUri(null);
+      setImageUri(null);
     } else if (visible && mode === "add") {
       // Reset form for add mode
       setFormData({
@@ -86,9 +126,153 @@ export default function AddEditCrewModal({
         role: "crew",
         note: "",
       });
+      setSearchStatus("idle");
+      setFoundPersonData(null);
+      // Reset ảnh
+      setNewImageUri(null);
+      setImageUri(null);
     }
   }, [visible, initialData, mode]);
 
+  // Load ảnh thuyền viên khi edit
+  useEffect(() => {
+    const loadCrewImage = async () => {
+      if (visible && mode === "edit" && initialData?.personalId) {
+        setIsLoadingImage(true);
+        try {
+          const response = await queryCrewImage(initialData.personalId);
+          if (response.data) {
+            const base64 = Buffer.from(response.data as ArrayBuffer).toString(
+              "base64"
+            );
+            setImageUri(`data:image/jpeg;base64,${base64}`);
+          }
+        } catch (error) {
+          // Không có ảnh hoặc lỗi - hiển thị placeholder
+          setImageUri(null);
+        } finally {
+          setIsLoadingImage(false);
+        }
+      }
+    };
+    loadCrewImage();
+  }, [visible, mode, initialData?.personalId]);
+
+  // Cleanup debounce timer on unmount
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, []);
+
+  // Search crew by personal ID with debounce
+  const searchCrewByPersonalId = useCallback(async (personalId: string) => {
+    if (!personalId.trim() || personalId.length < 5) {
+      setSearchStatus("idle");
+      return;
+    }
+
+    setIsSearching(true);
+    setSearchStatus("idle");
+
+    try {
+      const response = await searchCrew(personalId.trim());
+      if (response.data) {
+        const person = response.data;
+        setFoundPersonData(person);
+        setSearchStatus("found");
+
+        // Auto-fill form with found data
+        setFormData((prev) => ({
+          ...prev,
+          name: person.name || prev.name,
+          phone: person.phone || prev.phone,
+          email: person.email || prev.email,
+          address: person.address || prev.address,
+          note: person.note || prev.note,
+        }));
+      } else {
+        setSearchStatus("not_found");
+        setFoundPersonData(null);
+      }
+    } catch (error: any) {
+      // 404 or 401 means not found or unauthorized - treat as not found silently
+      const status = error?.response?.status;
+      if (status === 404 || status === 401) {
+        setSearchStatus("not_found");
+      } else {
+        // For other errors, just set to not_found without logging to console
+        setSearchStatus("not_found");
+      }
+      setFoundPersonData(null);
+    } finally {
+      setIsSearching(false);
+    }
+  }, []);
+
+  // Handle personal ID change with debounce
+  const handlePersonalIdChange = (value: string) => {
+    // If crew was previously found and user is changing personal ID, reset form
+    if (foundPersonData && value !== formData.personalId) {
+      setFormData({
+        personalId: value,
+        name: "",
+        phone: "",
+        email: "",
+        address: "",
+        role: "crew",
+        note: "",
+      });
+      setFoundPersonData(null);
+    } else {
+      setFormData((prev) => ({ ...prev, personalId: value }));
+    }
+
+    setSearchStatus("idle");
+    setIsWaitingDebounce(false);
+
+    // Clear previous timer
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+
+    // Only search in add mode and when value is long enough
+    if (mode === "add" && value.trim().length >= 5) {
+      // Show waiting indicator
+      setIsWaitingDebounce(true);
+
+      // Set new timer
+      debounceTimerRef.current = setTimeout(() => {
+        setIsWaitingDebounce(false);
+        searchCrewByPersonalId(value);
+      }, DEBOUNCE_DELAY);
+    }
+  };
+
+  // Chọn ảnh từ thư viện
+  const pickImage = async () => {
+    // Xin quyền truy cập thư viện ảnh
+    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
+    if (status !== "granted") {
+      Alert.alert(t("common.error"), "Cần cấp quyền truy cập thư viện ảnh");
+      return;
+    }
+
+    // Mở image picker
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ["images"],
+      allowsEditing: true,
+      aspect: [1, 1],
+      quality: 0.8,
+    });
+
+    if (!result.canceled && result.assets[0]) {
+      setNewImageUri(result.assets[0].uri);
+    }
+  };
+
   // Handle animation
   useEffect(() => {
     if (visible) {
@@ -108,6 +292,11 @@ export default function AddEditCrewModal({
   }, [visible, fadeAnim, slideAnim]);
 
   const handleClose = () => {
+    // Clear debounce timer
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+
     Animated.parallel([
       Animated.timing(fadeAnim, {
         toValue: 0,
@@ -125,7 +314,7 @@ export default function AddEditCrewModal({
   };
 
   const handleSave = async () => {
-    // Validate required fields
+    // === VALIDATE DỮ LIỆU ===
     if (!formData.personalId.trim()) {
       Alert.alert(t("common.error"), t("diary.crew.form.personalIdRequired"));
       return;
@@ -135,11 +324,65 @@ export default function AddEditCrewModal({
       return;
     }
 
+    // Kiểm tra thuyền viên đã có trong chuyến đi chưa (chỉ với mode add)
+    if (
+      mode === "add" &&
+      existingCrewIds.includes(formData.personalId.trim())
+    ) {
+      Alert.alert(t("common.error"), t("diary.crew.form.crewAlreadyExists"));
+      return;
+    }
+
     setIsSubmitting(true);
     try {
+      if (mode === "add" && tripId) {
+        // === CHẾ ĐỘ THÊM MỚI ===
+
+        // Bước 1: Nếu không tìm thấy thuyền viên trong hệ thống -> tạo mới
+        if (searchStatus === "not_found" || !foundPersonData) {
+          await newCrew({
+            personal_id: formData.personalId.trim(),
+            name: formData.name.trim(),
+            phone: formData.phone || "",
+            email: formData.email || "",
+            birth_date: new Date(),
+            note: formData.note || "",
+            address: formData.address || "",
+          });
+        }
+
+        // Bước 2: Thêm thuyền viên vào chuyến đi với role
+        await newTripCrew({
+          trip_id: tripId,
+          personal_id: formData.personalId.trim(),
+          role: formData.role as "captain" | "crew",
+        });
+      } else if (mode === "edit" && tripId) {
+        // === CHẾ ĐỘ CHỈNH SỬA ===
+
+        // Bước 1: Cập nhật thông tin cá nhân của thuyền viên (không bao gồm note)
+        await updateCrewInfo(formData.personalId.trim(), {
+          name: formData.name.trim(),
+          phone: formData.phone || "",
+          email: formData.email || "",
+          birth_date: new Date(),
+          address: formData.address || "",
+        });
+
+        // Bước 2: Cập nhật role và note của thuyền viên trong chuyến đi
+        await updateTripCrew({
+          trip_id: tripId,
+          personal_id: formData.personalId.trim(),
+          role: formData.role as "captain" | "crew",
+          note: formData.note || "",
+        });
+      }
+
+      // Gọi callback để reload danh sách
       await onSave(formData);
       handleClose();
-    } catch (error) {
+    } catch (error: any) {
+      console.error("Lỗi khi lưu thuyền viên:", error);
       Alert.alert(t("common.error"), t("diary.crew.form.saveError"));
     } finally {
       setIsSubmitting(false);
@@ -150,6 +393,65 @@ export default function AddEditCrewModal({
     setFormData((prev) => ({ ...prev, [field]: value }));
   };
 
+  // Render search status message
+  const renderSearchStatus = () => {
+    if (isSearching) {
+      return (
+        <View
+          style={[
+            styles.statusContainer,
+            { backgroundColor: colors.backgroundSecondary },
+          ]}
+        >
+          <ActivityIndicator size="small" color={colors.primary} />
+          <Text style={[styles.statusText, { color: colors.textSecondary }]}>
+            {t("diary.crew.form.searching")}
+          </Text>
+        </View>
+      );
+    }
+
+    if (searchStatus === "found") {
+      return (
+        <View
+          style={[
+            styles.statusContainer,
+            styles.statusSuccess,
+            { backgroundColor: colors.success + "15" },
+          ]}
+        >
+          <Ionicons name="checkmark-circle" size={18} color={colors.success} />
+          <Text style={[styles.statusText, { color: colors.success }]}>
+            {t("diary.crew.form.crewFound")}
+          </Text>
+        </View>
+      );
+    }
+
+    if (searchStatus === "not_found") {
+      return (
+        <View
+          style={[
+            styles.statusContainer,
+            styles.statusWarning,
+            { backgroundColor: colors.warning + "15" },
+          ]}
+        >
+          <Ionicons
+            name="information-circle"
+            size={18}
+            color={colors.warning}
+          />
+          <Text style={[styles.statusText, { color: colors.warning }]}>
+            {t("diary.crew.form.crewNotFound")}
+          </Text>
+        </View>
+      );
+    }
+
+    return null;
+  };
+
   const themedStyles = {
     modalContainer: { backgroundColor: colors.card },
     header: { borderBottomColor: colors.separator },
@@ -194,26 +496,96 @@ export default function AddEditCrewModal({
               <Ionicons name="close" size={24} color={colors.text} />
             </TouchableOpacity>
             <Text style={[styles.title, themedStyles.title]}>
-              {mode === "add" ? t("diary.crew.form.addTitle") : t("diary.crew.form.editTitle")}
+              {mode === "add"
+                ? t("diary.crew.form.addTitle")
+                : t("diary.crew.form.editTitle")}
             </Text>
             <View style={styles.headerPlaceholder} />
           </View>
 
           {/* Content */}
-          <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
+          <ScrollView
+            style={styles.content}
+            showsVerticalScrollIndicator={false}
+          >
+            {/* Ảnh thuyền viên */}
+            <View style={styles.photoSection}>
+              <TouchableOpacity
+                style={[
+                  styles.avatarContainer,
+                  { borderColor: colors.separator },
+                ]}
+                onPress={pickImage}
+                activeOpacity={0.8}
+              >
+                {isLoadingImage ? (
+                  <ActivityIndicator size="large" color={colors.primary} />
+                ) : newImageUri || imageUri ? (
+                  <Image
+                    source={{ uri: newImageUri || imageUri || "" }}
+                    style={styles.avatar}
+                  />
+                ) : (
+                  <View
+                    style={[
+                      styles.avatarPlaceholder,
+                      { backgroundColor: colors.backgroundSecondary },
+                    ]}
+                  >
+                    <Ionicons
+                      name="person"
+                      size={50}
+                      color={colors.textSecondary}
+                    />
+                  </View>
+                )}
+              </TouchableOpacity>
+              <Text style={[styles.photoHint, { color: colors.textSecondary }]}>
+                Nhấn để chọn ảnh
+              </Text>
+            </View>
+
             {/* Personal ID */}
             <View style={styles.formGroup}>
               <Text style={[styles.label, themedStyles.label]}>
                 {t("diary.crew.personalId")} *
               </Text>
-              <TextInput
+              <View style={styles.inputWithIcon}>
-                style={[styles.input, themedStyles.input]}
+                <TextInput
-                value={formData.personalId}
+                  style={[
-                onChangeText={(v) => updateField("personalId", v)}
+                    styles.input,
-                placeholder={t("diary.crew.form.personalIdPlaceholder")}
+                    styles.inputWithIconInput,
-                placeholderTextColor={themedStyles.placeholder.color}
+                    themedStyles.input,
-                editable={mode === "add"}
+                  ]}
-              />
+                  value={formData.personalId}
+                  onChangeText={handlePersonalIdChange}
+                  placeholder={t("diary.crew.form.personalIdPlaceholder")}
+                  placeholderTextColor={themedStyles.placeholder.color}
+                  editable={mode === "add"}
+                />
+                {/* Show waiting icon during debounce, spinner during search */}
+                {(isWaitingDebounce || isSearching) && (
+                  <View style={styles.inputIcon}>
+                    {isSearching ? (
+                      <ActivityIndicator size="small" color={colors.primary} />
+                    ) : (
+                      <Ionicons
+                        name="time-outline"
+                        size={20}
+                        color={colors.textSecondary}
+                      />
+                    )}
+                  </View>
+                )}
+              </View>
+              {mode === "add" && (
+                <Text style={[styles.hint, { color: colors.textSecondary }]}>
+                  {isWaitingDebounce
+                    ? t("diary.crew.form.waitingSearch")
+                    : t("diary.crew.form.searchHint")}
+                </Text>
+              )}
+              {renderSearchStatus()}
             </View>
 
             {/* Name */}
@@ -309,10 +681,18 @@ export default function AddEditCrewModal({
           {/* Footer */}
           <View style={[styles.footer, { borderTopColor: colors.separator }]}>
             <TouchableOpacity
-              style={[styles.cancelButton, { backgroundColor: colors.backgroundSecondary }]}
+              style={[
+                styles.cancelButton,
+                { backgroundColor: colors.backgroundSecondary },
+              ]}
               onPress={handleClose}
             >
-              <Text style={[styles.cancelButtonText, { color: colors.textSecondary }]}>
+              <Text
+                style={[
+                  styles.cancelButtonText,
+                  { color: colors.textSecondary },
+                ]}
+              >
                 {t("common.cancel")}
               </Text>
             </TouchableOpacity>
@@ -363,7 +743,11 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "700",
-    fontFamily: Platform.select({ ios: "System", android: "Roboto", default: "System" }),
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
   },
   headerPlaceholder: {
     width: 32,
@@ -378,7 +762,11 @@ const styles = StyleSheet.create({
     fontSize: 14,
     fontWeight: "600",
     marginBottom: 8,
-    fontFamily: Platform.select({ ios: "System", android: "Roboto", default: "System" }),
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
   },
   input: {
     height: 44,
@@ -386,7 +774,52 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     paddingHorizontal: 14,
     fontSize: 15,
-    fontFamily: Platform.select({ ios: "System", android: "Roboto", default: "System" }),
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
+  },
+  inputWithIcon: {
+    position: "relative",
+  },
+  inputWithIconInput: {
+    paddingRight: 44,
+  },
+  inputIcon: {
+    position: "absolute",
+    right: 12,
+    top: 0,
+    bottom: 0,
+    justifyContent: "center",
+  },
+  hint: {
+    fontSize: 12,
+    marginTop: 4,
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
+  },
+  statusContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginTop: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 8,
+  },
+  statusSuccess: {},
+  statusWarning: {},
+  statusText: {
+    fontSize: 13,
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
   },
   textArea: {
     height: 80,
@@ -407,7 +840,11 @@ const styles = StyleSheet.create({
   roleButtonText: {
     fontSize: 13,
     fontWeight: "500",
-    fontFamily: Platform.select({ ios: "System", android: "Roboto", default: "System" }),
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
   },
   footer: {
     flexDirection: "row",
@@ -424,7 +861,11 @@ const styles = StyleSheet.create({
   cancelButtonText: {
     fontSize: 16,
     fontWeight: "600",
-    fontFamily: Platform.select({ ios: "System", android: "Roboto", default: "System" }),
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
   },
   saveButton: {
     flex: 1,
@@ -436,9 +877,56 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: "600",
     color: "#FFFFFF",
-    fontFamily: Platform.select({ ios: "System", android: "Roboto", default: "System" }),
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
   },
   buttonDisabled: {
     opacity: 0.7,
   },
+  // Styles cho phần ảnh thuyền viên
+  photoSection: {
+    alignItems: "center",
+    marginBottom: 20,
+  },
+  avatarContainer: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+    borderWidth: 2,
+    justifyContent: "center",
+    alignItems: "center",
+    overflow: "hidden",
+    position: "relative",
+  },
+  avatar: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+  },
+  avatarPlaceholder: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  cameraIconOverlay: {
+    position: "absolute",
+    bottom: 0,
+    right: 0,
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    justifyContent: "center",
+    alignItems: "center",
+    borderWidth: 2,
+    borderColor: "#FFFFFF",
+  },
+  photoHint: {
+    fontSize: 12,
+    marginTop: 8,
+  },
 });

components/diary/TripCrewModal/CrewCard.tsx

@@ -12,7 +12,7 @@ import { Ionicons } from "@expo/vector-icons";
 import { useThemeContext } from "@/hooks/use-theme-context";
 import { useI18n } from "@/hooks/use-i18n";
 import dayjs from "dayjs";
-import { queryCrewImage } from "@/controller/TripCrewController";
+import { queryCrewImage } from "@/controller/CrewController";
 import { Buffer } from "buffer";
 
 interface CrewCardProps {
@@ -26,8 +26,12 @@ export default function CrewCard({ crew, onEdit, onDelete }: CrewCardProps) {
   const { t } = useI18n();
 
   const person = crew.Person;
-  const joinedDate = crew.joined_at ? dayjs(crew.joined_at).format("DD/MM/YYYY") : "-";
+  const joinedDate = crew.joined_at
-  const leftDate = crew.left_at ? dayjs(crew.left_at).format("DD/MM/YYYY") : null;
+    ? dayjs(crew.joined_at).format("DD/MM/YYYY")
+    : "-";
+  const leftDate = crew.left_at
+    ? dayjs(crew.left_at).format("DD/MM/YYYY")
+    : null;
 
   // State for image
   const [imageUri, setImageUri] = useState<string | null>(null);
@@ -47,7 +51,9 @@ export default function CrewCard({ crew, onEdit, onDelete }: CrewCardProps) {
         const response = await queryCrewImage(person.personal_id);
         if (response.data) {
           // Convert arraybuffer to base64
-          const base64 = Buffer.from(response.data as ArrayBuffer).toString("base64");
+          const base64 = Buffer.from(response.data as ArrayBuffer).toString(
+            "base64"
+          );
           setImageUri(`data:image/jpeg;base64,${base64}`);
         } else {
           setImageError(true);
@@ -112,7 +118,12 @@ export default function CrewCard({ crew, onEdit, onDelete }: CrewCardProps) {
           <Text style={[styles.name, themedStyles.name]} numberOfLines={1}>
             {person?.name || "-"}
           </Text>
-          <View style={[styles.roleBadge, { backgroundColor: themedStyles.role.backgroundColor }]}>
+          <View
+            style={[
+              styles.roleBadge,
+              { backgroundColor: themedStyles.role.backgroundColor },
+            ]}
+          >
             <Text style={[styles.roleText, { color: themedStyles.role.color }]}>
               {crew.role || t("diary.crew.member")}
             </Text>
@@ -123,7 +134,11 @@ export default function CrewCard({ crew, onEdit, onDelete }: CrewCardProps) {
         <View style={styles.infoGrid}>
           {/* Phone */}
           <View style={styles.infoRow}>
-            <Ionicons name="call-outline" size={14} color={themedStyles.iconColor} />
+            <Ionicons
+              name="call-outline"
+              size={14}
+              color={themedStyles.iconColor}
+            />
             <Text style={[styles.value, themedStyles.value]} numberOfLines={1}>
               {person?.phone || "-"}
             </Text>
@@ -131,7 +146,11 @@ export default function CrewCard({ crew, onEdit, onDelete }: CrewCardProps) {
 
           {/* Personal ID */}
           <View style={styles.infoRow}>
-            <Ionicons name="card-outline" size={14} color={themedStyles.iconColor} />
+            <Ionicons
+              name="card-outline"
+              size={14}
+              color={themedStyles.iconColor}
+            />
             <Text style={[styles.value, themedStyles.value]} numberOfLines={1}>
               {person?.personal_id || "-"}
             </Text>
@@ -139,14 +158,22 @@ export default function CrewCard({ crew, onEdit, onDelete }: CrewCardProps) {
 
           {/* Joined Date */}
           <View style={styles.infoRow}>
-            <Ionicons name="calendar-outline" size={14} color={themedStyles.iconColor} />
+            <Ionicons
+              name="calendar-outline"
+              size={14}
+              color={themedStyles.iconColor}
+            />
             <Text style={[styles.value, themedStyles.value]}>{joinedDate}</Text>
           </View>
 
           {/* Left Date (only show if exists) */}
           {leftDate && (
             <View style={styles.infoRow}>
-              <Ionicons name="exit-outline" size={14} color={themedStyles.iconColor} />
+              <Ionicons
+                name="exit-outline"
+                size={14}
+                color={themedStyles.iconColor}
+              />
               <Text style={[styles.value, themedStyles.value]}>{leftDate}</Text>
             </View>
           )}
@@ -157,10 +184,17 @@ export default function CrewCard({ crew, onEdit, onDelete }: CrewCardProps) {
           <View style={styles.actionRow}>
             {onEdit && (
               <TouchableOpacity
-                style={[styles.actionButton, { backgroundColor: colors.primary + "15" }]}
+                style={[
+                  styles.actionButton,
+                  { backgroundColor: colors.primary + "15" },
+                ]}
                 onPress={() => onEdit(crew)}
               >
-                <Ionicons name="pencil-outline" size={14} color={colors.primary} />
+                <Ionicons
+                  name="pencil-outline"
+                  size={14}
+                  color={colors.primary}
+                />
                 <Text style={[styles.actionText, { color: colors.primary }]}>
                   {t("common.edit")}
                 </Text>
@@ -168,11 +202,23 @@ export default function CrewCard({ crew, onEdit, onDelete }: CrewCardProps) {
             )}
             {onDelete && (
               <TouchableOpacity
-                style={[styles.actionButton, { backgroundColor: (colors.error || "#FF3B30") + "15" }]}
+                style={[
+                  styles.actionButton,
+                  { backgroundColor: (colors.error || "#FF3B30") + "15" },
+                ]}
                 onPress={() => onDelete(crew)}
               >
-                <Ionicons name="trash-outline" size={14} color={colors.error || "#FF3B30"} />
+                <Ionicons
-                <Text style={[styles.actionText, { color: colors.error || "#FF3B30" }]}>
+                  name="trash-outline"
+                  size={14}
+                  color={colors.error || "#FF3B30"}
+                />
+                <Text
+                  style={[
+                    styles.actionText,
+                    { color: colors.error || "#FF3B30" },
+                  ]}
+                >
                   {t("common.delete")}
                 </Text>
               </TouchableOpacity>
@@ -191,7 +237,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     marginBottom: 12,
     overflow: "hidden",
-    maxHeight: 150,
+    maxHeight: 160,
   },
   imageSection: {
     width: 130,

config/axios.ts

@@ -24,7 +24,7 @@ const codeMessage = {
 
 // Tạo instance axios với cấu hình cơ bản
 const api: AxiosInstance = axios.create({
-  baseURL: "https://sgw.gms.vn", 
+  baseURL: "https://sgw.gms.vn",
   timeout: 20000, // Timeout 20 giây
   headers: {
     "Content-Type": "application/json",
@@ -72,8 +72,9 @@ api.interceptors.response.use(
       statusText ||
       "Unknown error";
 
-    // Không hiển thị toast cho status 400 (validation errors)
+    // Không hiển thị toast cho status 400 (validation errors) và 404 (not found)
-    if (status !== 400) {
+    // 404 được xử lý riêng bởi component (ví dụ: search crew không tìm thấy)
+    if (status !== 400 && status !== 404) {
       showErrorToast(`Lỗi ${status}: ${errMsg}`);
     }
 

constants/index.ts

@@ -66,3 +66,6 @@ export const API_GET_ALL_SHIP = "/api/sgw/ships";
 export const API_GET_ALL_PORT = "/api/sgw/ports";
 export const API_GET_PHOTO = "/api/sgw/photo";
 export const API_GET_TRIP_CREW = "/api/sgw/trips/crews";
+export const API_SEARCH_CREW = "/api/sgw/trips/crew/";
+export const API_TRIP_CREW = "/api/sgw/tripcrew";
+export const API_CREW = "/api/sgw/crew";

controller/CrewController.ts

@@ -0,0 +1,19 @@
+import { api } from "@/config";
+import { API_CREW, API_GET_PHOTO } from "@/constants";
+
+export async function newCrew(body: Model.NewCrewAPIRequest) {
+  return api.post(API_CREW, body);
+}
+
+export async function updateCrewInfo(
+  personalId: string,
+  body: Model.UpdateCrewAPIRequest
+) {
+  return api.put(`${API_CREW}/${personalId}`, body);
+}
+
+export async function queryCrewImage(personal_id: string) {
+  return await api.get(`${API_GET_PHOTO}/people/${personal_id}/main`, {
+    responseType: "arraybuffer",
+  });
+}

controller/TripController.ts

@@ -8,6 +8,7 @@ import {
   API_GET_LAST_TRIP,
   API_POST_TRIP,
   API_PUT_TRIP,
+  API_TRIP_CREW,
 } from "@/constants";
 
 export async function queryTrip() {

controller/TripCrewController.ts

@@ -1,12 +1,27 @@
 import { api } from "@/config";
-import { API_GET_PHOTO, API_GET_TRIP_CREW } from "@/constants";
+import {
+  API_GET_PHOTO,
+  API_GET_TRIP_CREW,
+  API_SEARCH_CREW,
+  API_TRIP_CREW,
+} from "@/constants";
 
 export async function queryTripCrew(tripId: string) {
   return api.get<Model.TripCrews[]>(`${API_GET_TRIP_CREW}/${tripId}`);
 }
 
-export async function queryCrewImage(personal_id: string) {
+export async function searchCrew(personal_id: string) {
-  return await api.get(`${API_GET_PHOTO}/people/${personal_id}/main`, {
+  return api.get<Model.TripCrewPerson>(`${API_SEARCH_CREW}/${personal_id}`);
-    responseType: "arraybuffer",
+}
-  });
+
+export async function newTripCrew(body: Model.NewTripCrewAPIRequest) {
+  return api.post(API_TRIP_CREW, body);
+}
+
+export async function updateTripCrew(body: Model.UpdateTripCrewAPIRequest) {
+  return api.put(API_TRIP_CREW, body);
+}
+
+export async function deleteTripCrew(tripId: string, personalId: string) {
+  return api.delete(`${API_TRIP_CREW}/${tripId}/${personalId}`);
 }

controller/typings.d.ts

@@ -154,6 +154,37 @@ declare namespace Model {
     created_at: Date;
     updated_at: Date;
   }
+
+  // TripCrew Request Body
+  interface NewTripCrewAPIRequest {
+    trip_id: string;
+    personal_id: string;
+    role: "captain" | "crew";
+  }
+  interface UpdateTripCrewAPIRequest {
+    trip_id: string;
+    personal_id: string;
+    role: "captain" | "crew";
+    note: string;
+  }
+  interface NewCrewAPIRequest {
+    personal_id: string;
+    name: string;
+    phone: string;
+    email: string;
+    birth_date: Date;
+    note: string;
+    address: string;
+  }
+  interface UpdateCrewAPIRequest {
+    name: string;
+    phone: string;
+    email: string;
+    birth_date: Date;
+    //note: string;
+    address: string;
+  }
+
   // Chi phí chuyến đi
   interface TripCost {
     type: string;

locales/en.json

@@ -154,9 +154,17 @@
     "departurePort": "Departure Port",
     "arrivalPort": "Arrival Port",
     "selectPort": "Select port",
+    "searchPort": "Search port...",
+    "noPortsFound": "No ports found",
     "fishingGroundCodes": "Fishing Ground Codes",
     "fishingGroundCodesHint": "Enter fishing ground codes (comma separated)",
     "fishingGroundCodesPlaceholder": "e.g: 1,2,3",
+    "formSection": {
+      "basicInfo": "Basic Information",
+      "schedule": "Schedule & Location",
+      "equipment": "Fishing Gear",
+      "costs": "Trip Costs"
+    },
     "autoFill": {
       "title": "Auto-fill data",
       "description": "Fill from the ship's last trip",
@@ -213,8 +221,57 @@
         "address": "Address",
         "addressPlaceholder": "Enter address",
         "notePlaceholder": "Enter note (optional)",
-        "saveError": "Unable to save. Please try again."
+        "saveError": "Unable to save. Please try again.",
+        "searchHint": "Enter ID number, system will auto-search",
+        "waitingSearch": "Waiting to search...",
+        "searching": "Searching...",
+        "crewFound": "Crew member found, data has been auto-filled",
+        "crewNotFound": "Crew member not found, please enter information to create new",
+        "crewAlreadyExists": "This crew member is already in the trip"
       }
+    },
+    "tripDetail": {
+      "title": "Trip Details",
+      "notFound": "Trip information not found",
+      "basicInfo": "Basic Information",
+      "shipId": "VMS Ship Code",
+      "departureTime": "Departure Time",
+      "arrivalTime": "Arrival Time",
+      "departurePort": "Departure Port",
+      "arrivalPort": "Arrival Port",
+      "fishingGrounds": "Fishing Grounds",
+      "alerts": "Alert List",
+      "noAlerts": "No alerts",
+      "unknownAlert": "Unknown alert",
+      "confirmed": "Confirmed",
+      "costs": "Trip Costs",
+      "noCosts": "No costs",
+      "unknownCost": "Unknown cost",
+      "totalCost": "Total Cost",
+      "gears": "Fishing Gear List",
+      "noGears": "No fishing gear",
+      "unknownGear": "Unknown gear",
+      "quantity": "Quantity",
+      "crew": "Crew List",
+      "noCrew": "No crew",
+      "unknownCrew": "Unknown crew member",
+      "roleCaptain": "Captain",
+      "roleCrew": "Crew",
+      "roleEngineer": "Engineer",
+      "fishingLogs": "Fishing Log List",
+      "noFishingLogs": "No fishing logs",
+      "startTime": "Start",
+      "endTime": "End",
+      "startLocation": "Start Location",
+      "haulLocation": "Haul Location",
+      "catchInfo": "Catch Info",
+      "species": "species",
+      "unknownFish": "Unknown fish",
+      "more": "more species",
+      "logStatusPending": "Pending",
+      "logStatusActive": "Active",
+      "logStatusCompleted": "Completed",
+      "logStatusUnknown": "Unknown"
     }
   },
   "trip": {

locales/vi.json

@@ -221,7 +221,13 @@
         "address": "Địa chỉ",
         "addressPlaceholder": "Nhập địa chỉ",
         "notePlaceholder": "Nhập ghi chú (nếu có)",
-        "saveError": "Không thể lưu thông tin. Vui lòng thử lại."
+        "saveError": "Không thể lưu thông tin. Vui lòng thử lại.",
+        "searchHint": "Nhập số định danh, hệ thống sẽ tự động tìm kiếm",
+        "waitingSearch": "Đang chờ tìm kiếm...",
+        "searching": "Đang tìm kiếm...",
+        "crewFound": "Đã tìm thấy thuyền viên, dữ liệu đã được điền tự động",
+        "crewNotFound": "Không tìm thấy thuyền viên, vui lòng nhập thông tin để tạo mới",
+        "crewAlreadyExists": "Thuyền viên này đã có trong chuyến đi"
       }
     },
     "tripDetail": {

package-lock.json

@@ -28,6 +28,7 @@
         "expo-constants": "~18.0.10",
         "expo-font": "~14.0.9",
         "expo-haptics": "~15.0.7",
+        "expo-image-picker": "~17.0.10",
         "expo-linking": "~8.0.8",
         "expo-localization": "~17.0.7",
         "expo-router": "~6.0.13",
@@ -8545,6 +8546,27 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-image-loader": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/expo-image-loader/-/expo-image-loader-6.0.0.tgz",
+      "integrity": "sha512-nKs/xnOGw6ACb4g26xceBD57FKLFkSwEUTDXEDF3Gtcu3MqF3ZIYd3YM+sSb1/z9AKV1dYT7rMSGVNgsveXLIQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
+    "node_modules/expo-image-picker": {
+      "version": "17.0.10",
+      "resolved": "https://registry.npmjs.org/expo-image-picker/-/expo-image-picker-17.0.10.tgz",
+      "integrity": "sha512-a2xrowp2trmvXyUWgX3O6Q2rZaa2C59AqivKI7+bm+wLvMfTEbZgldLX4rEJJhM8xtmEDTNU+lzjtObwzBRGaw==",
+      "license": "MIT",
+      "dependencies": {
+        "expo-image-loader": "~6.0.0"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-keep-awake": {
       "version": "15.0.7",
       "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-15.0.7.tgz",

package.json

@@ -31,6 +31,7 @@
     "expo-constants": "~18.0.10",
     "expo-font": "~14.0.9",
     "expo-haptics": "~15.0.7",
+    "expo-image-picker": "~17.0.10",
     "expo-linking": "~8.0.8",
     "expo-localization": "~17.0.7",
     "expo-router": "~6.0.13",