cập nhật api thêm/sửa mẻ

app/(tabs)/_layout.tsx

@@ -18,11 +18,11 @@ export default function TabLayout() {
       // TODO: xử lý khi chuyển tab ở đây
       if (prev.current === "(tabs)" && currentSegment !== "(tabs)") {
         stopEvents();
-        // console.log("Stop events");
+        console.log("Stop events");
       } else if (prev.current !== "(tabs)" && currentSegment === "(tabs)") {
         // we came back into the tabs group — restart polling
         startEvents();
-        // console.log("start events");
+        console.log("start events");
       }
       prev.current = currentSegment;
     }

app/(tabs)/index.tsx

@@ -145,7 +145,7 @@ export default function HomeScreen() {
       }
 
       for (const zone of zones) {
-        console.log("Zone Data: ", zone);
+        // console.log("Zone Data: ", zone);
         const geom = banzoneData.find((b) => b.id === zone.zone_id);
         if (!geom) {
           continue;

components/Select.tsx

@@ -31,6 +31,7 @@ export interface SelectProps {
   mode?: "single" | "multiple"; // multiple not implemented yet
   style?: StyleProp<ViewStyle>;
   size?: "small" | "middle" | "large";
+  listStyle?: StyleProp<ViewStyle>;
 }
 
 /**
@@ -50,6 +51,7 @@ const Select: React.FC<SelectProps> = ({
   showSearch = false,
   mode = "single",
   style,
+  listStyle,
   size = "middle",
 }) => {
   const [selectedValue, setSelectedValue] = useState<
@@ -152,7 +154,7 @@ const Select: React.FC<SelectProps> = ({
               autoFocus
             />
           )}
-          <ScrollView style={styles.list}>
+          <ScrollView style={[styles.list, listStyle]}>
             {filteredOptions.map((item) => (
               <TouchableOpacity
                 key={item.value}

components/tripInfo/NetListTable.tsx

@@ -160,13 +160,6 @@ const NetListTable: React.FC = () => {
           setModalVisible(false);
         }}
         netData={selectedNet}
-        stt={
-          selectedNet
-            ? data.findIndex(
-                (item) => item.fishing_log_id === selectedNet.fishing_log_id
-              ) + 1
-            : undefined
-        }
       /> */}
     </View>
   );

components/tripInfo/modal/CreateOrUpdateHaulModal.tsx

@@ -1,11 +1,26 @@
 import Select from "@/components/Select";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { queryGpsData } from "@/controller/DeviceController";
+import { queryUpdateFishingLogs } from "@/controller/TripController";
+import { showErrorToast, showSuccessToast } from "@/services/toast_service";
 import { useFishes } from "@/state/use-fish";
+import { useTrip } from "@/state/use-trip";
 import { zodResolver } from "@hookform/resolvers/zod";
 import React from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
-import { Button, FlatList, Modal, Text, TextInput, View } from "react-native";
+import {
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  ScrollView,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
 import { z } from "zod";
 import { InfoSection } from "./NetDetailModal/components";
+import styles from "./style/CreateOrUpdateHaulModal.styles";
 
 interface CreateOrUpdateHaulModalProps {
   isVisible: boolean;
@@ -13,7 +28,6 @@ interface CreateOrUpdateHaulModalProps {
   fishingLog?: Model.FishingLog | null;
   fishingLogIndex?: number;
 }
-
 const UNITS = ["con", "kg", "tấn"] as const;
 type Unit = (typeof UNITS)[number];
 
@@ -52,9 +66,14 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
   isVisible,
   onClose,
   fishingLog,
-  fishingLogIndex
+  fishingLogIndex,
 }) => {
   const [isCreateMode, setIsCreateMode] = React.useState(!fishingLog?.info);
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [expandedFishIndices, setExpandedFishIndices] = React.useState<
+    number[]
+  >([]);
+  const { trip, getTrip } = useTrip();
   const { control, handleSubmit, formState, watch, reset } =
     useForm<FormValues>({
       resolver: zodResolver(formSchema),
@@ -74,26 +93,96 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
     keyName: "_id", // tránh đụng key
   });
 
-  const onSubmit = (values: FormValues) => {
+  const handleToggleExpanded = (index: number) => {
-    // Map form values to the FishingLogInfo-like shape the user requested
+    setExpandedFishIndices((prev) =>
-    const mapped = values.fish.map((f) => {
+      prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]
-      const meta = fishSpecies!.find((x) => x.id === f.id);
+    );
-      return {
+  };
-        fish_species_id: f.id,
-        fish_name: meta?.name,
-        catch_number: f.quantity,
-        catch_unit: f.unit,
-        fish_size: f.size,
-        fish_rarity: meta?.rarity_level,
-        fish_condition: "",
-        gear_usage: "",
-      } as unknown; // inferred shape — keep as unknown to avoid relying on global types here
-    });
 
-    console.log("SUBMIT (FishingLogInfo[]): ", JSON.stringify(mapped, null, 2));
+  const onSubmit = async (values: FormValues) => {
+    // Ensure species list is available so we can populate name/rarity
+    if (!fishSpecies || fishSpecies.length === 0) {
+      showErrorToast("Danh sách loài cá chưa sẵn sàng");
+      return;
+    }
+    // Helper to map form rows -> API info entries (single place)
+    const buildInfo = (rows: FormValues["fish"]) =>
+      rows.map((item) => {
+        const meta = fishSpecies.find((f) => f.id === item.id);
+        return {
+          fish_species_id: item.id,
+          fish_name: meta?.name ?? "",
+          catch_number: item.quantity,
+          catch_unit: item.unit,
+          fish_size: item.size,
+          fish_rarity: meta?.rarity_level ?? null,
+          fish_condition: "",
+          gear_usage: "",
+        } as unknown;
+      });
 
-    // close modal after submit (you can change this to pass the payload to a parent via prop)
+    try {
-    onClose();
+      const gpsResp = await queryGpsData();
+      if (!gpsResp.data) {
+        showErrorToast("Không thể lấy dữ liệu GPS hiện tại");
+        return;
+      }
+      const gpsData = gpsResp.data;
+
+      const info = buildInfo(values.fish) as any;
+
+      // Base payload fields shared between create and update
+      const base: Partial<Model.FishingLog> = {
+        fishing_log_id: fishingLog?.fishing_log_id || "",
+        trip_id: trip?.id || "",
+        start_at: fishingLog?.start_at!,
+        start_lat: fishingLog?.start_lat!,
+        start_lon: fishingLog?.start_lon!,
+        weather_description:
+          fishingLog?.weather_description || "Nắng đẹp, Trời nhiều mây",
+        info,
+        sync: true,
+      };
+
+      // Build final payload depending on create vs update
+      const body: Model.FishingLog =
+        fishingLog?.status == 0
+          ? ({
+              ...base,
+              haul_lat: gpsData.lat,
+              haul_lon: gpsData.lon,
+              end_at: new Date(),
+              status: 1,
+            } as Model.FishingLog)
+          : ({
+              ...base,
+              haul_lat: fishingLog?.haul_lat,
+              haul_lon: fishingLog?.haul_lon,
+              end_at: fishingLog?.end_at,
+              status: fishingLog?.status,
+            } as Model.FishingLog);
+      // console.log("Body: ", body);
+
+      const resp = await queryUpdateFishingLogs(body);
+      if (resp?.status === 200) {
+        showSuccessToast(
+          fishingLog?.fishing_log_id == null
+            ? "Thêm mẻ cá thành công"
+            : "Cập nhật mẻ cá thành công"
+        );
+        getTrip();
+        onClose();
+      } else {
+        showErrorToast(
+          fishingLog?.fishing_log_id == null
+            ? "Thêm mẻ cá thất bại"
+            : "Cập nhật mẻ cá thất bại"
+        );
+      }
+    } catch (err) {
+      console.error("onSubmit error:", err);
+      showErrorToast("Có lỗi xảy ra khi lưu mẻ cá");
+    }
   };
 
   // Initialize / reset form when modal visibility or haulData changes
@@ -102,6 +191,8 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
       // when modal closed, clear form to default
       reset({ fish: [defaultItem()] });
       setIsCreateMode(true);
+      setIsEditing(false);
+      setExpandedFishIndices([]);
       return;
     }
 
@@ -110,6 +201,8 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
       // explicit null -> start with a single default item
       reset({ fish: [defaultItem()] });
       setIsCreateMode(true);
+      setIsEditing(true); // allow editing for new haul
+      setExpandedFishIndices([0]); // expand first item
     } else if (Array.isArray(fishingLog?.info) && fishingLog?.info.length > 0) {
       // map FishingLogInfo -> form rows
       const mapped = fishingLog.info.map((h) => ({
@@ -120,132 +213,215 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
       }));
       reset({ fish: mapped as any });
       setIsCreateMode(false);
+      setIsEditing(false); // view mode by default
+      setExpandedFishIndices([]); // all collapsed
     } else {
       // undefined or empty array -> default
       reset({ fish: [defaultItem()] });
       setIsCreateMode(true);
+      setIsEditing(true); // allow editing for new haul
+      setExpandedFishIndices([0]); // expand first item
     }
   }, [isVisible, fishingLog?.info, reset]);
-  const renderRow = ({ item, index }: { item: any; index: number }) => {
+  const renderRow = (item: any, index: number) => {
+    const isExpanded = expandedFishIndices.includes(index);
+
     return (
-      <View
+      <View key={item._id} style={styles.fishCard}>
-        style={{
+        {/* Delete + Chevron buttons - top right corner */}
-          marginBottom: 12,
+        <View
-          padding: 12,
+          style={{
-          borderWidth: 1,
+            position: "absolute",
-          borderRadius: 8,
+            top: 0,
-        }}
+            right: 0,
-      >
+            zIndex: 9999,
-        <Text style={{ fontWeight: "600", marginBottom: 8 }}>
+            flexDirection: "row",
-          Loài cá #{index + 1}
+            alignItems: "center",
-        </Text>
+            padding: 8,
-
+            gap: 8,
-        {/* Species dropdown */}
+          }}
-        <Controller
+          pointerEvents="box-none"
-          control={control}
+        >
-          name={`fish.${index}.id`}
+          {isEditing && (
-          render={({ field: { value, onChange } }) => (
+            <TouchableOpacity
-            <View style={{ marginBottom: 8 }}>
+              onPress={() => remove(index)}
-              <Text style={{ marginBottom: 4 }}>Tên cá</Text>
+              style={{
-              <Select
+                backgroundColor: "#FF3B30",
-                options={fishSpecies!.map((fish) => ({
+                borderRadius: 8,
-                  label: fish.name,
+                width: 40,
-                  value: fish.id,
+                height: 40,
-                }))}
+                justifyContent: "center",
-                value={value}
+                alignItems: "center",
-                onChange={onChange}
+                shadowColor: "#000",
-                placeholder="Chọn loài cá"
+                shadowOpacity: 0.08,
-              />
+                shadowRadius: 2,
-              {errors.fish?.[index]?.id && (
+                shadowOffset: { width: 0, height: 1 },
-                <Text style={{ color: "red" }}>
+                elevation: 2,
-                  {errors.fish[index]?.id?.message as string}
+              }}
-                </Text>
+              hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
-              )}
+              activeOpacity={0.7}
-            </View>
+            >
+              <IconSymbol name="trash" size={24} color="#fff" />
+            </TouchableOpacity>
           )}
-        />
+          <TouchableOpacity
-
+            onPress={() => handleToggleExpanded(index)}
-        {/* Quantity */}
+            style={{
-        <Controller
+              backgroundColor: "#007AFF",
-          control={control}
+              borderRadius: 8,
-          name={`fish.${index}.quantity`}
+              width: 40,
-          render={({ field: { value, onChange, onBlur } }) => (
+              height: 40,
-            <View style={{ marginBottom: 8 }}>
+              justifyContent: "center",
-              <Text style={{ marginBottom: 4 }}>Số lượng</Text>
+              alignItems: "center",
-              <TextInput
+              shadowColor: "#000",
-                keyboardType="numeric"
+              shadowOpacity: 0.08,
-                value={String(value ?? "")}
+              shadowRadius: 2,
-                onBlur={onBlur}
+              shadowOffset: { width: 0, height: 1 },
-                onChangeText={(t) =>
+              elevation: 2,
-                  onChange(Number(t.replace(/,/g, ".")) || 0)
+            }}
-                }
+            hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
-                style={{ padding: 10, borderWidth: 1, borderRadius: 6 }}
+            activeOpacity={0.7}
-              />
+          >
-              {errors.fish?.[index]?.quantity && (
+            <IconSymbol
-                <Text style={{ color: "red" }}>
+              name={isExpanded ? "chevron.up" : "chevron.down"}
-                  {errors.fish[index]?.quantity?.message as string}
+              size={24}
-                </Text>
+              color="#fff"
-              )}
+            />
-            </View>
+          </TouchableOpacity>
-          )}
-        />
-
-        {/* Unit dropdown */}
-        <Controller
-          control={control}
-          name={`fish.${index}.unit`}
-          render={({ field: { value, onChange } }) => (
-            <View style={{ marginBottom: 8 }}>
-              <Text style={{ marginBottom: 4 }}>Đơn vị</Text>
-              <Select
-                options={UNITS_OPTIONS.map((unit) => ({
-                  label: unit.label,
-                  value: unit.value,
-                }))}
-                value={value}
-                onChange={onChange}
-                placeholder="Chọn đơn vị"
-              />
-              {errors.fish?.[index]?.unit && (
-                <Text style={{ color: "red" }}>
-                  {errors.fish[index]?.unit?.message as string}
-                </Text>
-              )}
-            </View>
-          )}
-        />
-
-        {/* Size (optional) */}
-        <Controller
-          control={control}
-          name={`fish.${index}.size`}
-          render={({ field: { value, onChange, onBlur } }) => (
-            <View style={{ marginBottom: 8 }}>
-              <Text style={{ marginBottom: 4 }}>
-                Kích thước (cm) — tùy chọn
-              </Text>
-              <TextInput
-                keyboardType="numeric"
-                value={value ? String(value) : ""}
-                onBlur={onBlur}
-                onChangeText={(t) =>
-                  onChange(t ? Number(t.replace(/,/g, ".")) : undefined)
-                }
-                style={{ padding: 10, borderWidth: 1, borderRadius: 6 }}
-              />
-              {errors.fish?.[index]?.size && (
-                <Text style={{ color: "red" }}>
-                  {errors.fish[index]?.size?.message as string}
-                </Text>
-              )}
-            </View>
-          )}
-        />
-
-        {/* Remove row */}
-        <View style={{ flexDirection: "row", justifyContent: "flex-end" }}>
-          <Button title="Xóa loài này" onPress={() => remove(index)} />
         </View>
+
+        {/* Header - visible when collapsed */}
+        {!isExpanded && (
+          <View style={{ paddingRight: 100 }}>
+            {(() => {
+              const fishId = watch(`fish.${index}.id`);
+              const fishName = fishSpecies?.find((f) => f.id === fishId)?.name;
+              const quantity = watch(`fish.${index}.quantity`);
+              const unit = watch(`fish.${index}.unit`);
+
+              return (
+                <View style={styles.fishCardHeaderContent}>
+                  <Text style={styles.fishCardTitle}>
+                    {fishName || "Chọn loài cá"}:
+                  </Text>
+                  <Text style={styles.fishCardSubtitle}>
+                    {fishName ? `${quantity} ${unit}` : "---"}
+                  </Text>
+                </View>
+              );
+            })()}
+          </View>
+        )}
+
+        {/* Form - visible when expanded */}
+        {isExpanded && (
+          <View style={{ paddingRight: 100 }}>
+            {/* Species dropdown */}
+            <Controller
+              control={control}
+              name={`fish.${index}.id`}
+              render={({ field: { value, onChange } }) => (
+                <View style={styles.fieldGroup}>
+                  <Text style={styles.label}>Tên cá</Text>
+                  <Select
+                    options={fishSpecies!.map((fish) => ({
+                      label: fish.name,
+                      value: fish.id,
+                    }))}
+                    value={value}
+                    onChange={onChange}
+                    placeholder="Chọn loài cá"
+                    disabled={!isEditing}
+                  />
+                  {errors.fish?.[index]?.id && (
+                    <Text style={styles.errorText}>
+                      {errors.fish[index]?.id?.message as string}
+                    </Text>
+                  )}
+                </View>
+              )}
+            />
+
+            {/* Quantity */}
+            <Controller
+              control={control}
+              name={`fish.${index}.quantity`}
+              render={({ field: { value, onChange, onBlur } }) => (
+                <View style={styles.fieldGroup}>
+                  <Text style={styles.label}>Số lượng</Text>
+                  <TextInput
+                    keyboardType="numeric"
+                    value={String(value ?? "")}
+                    onBlur={onBlur}
+                    onChangeText={(t) =>
+                      onChange(Number(t.replace(/,/g, ".")) || 0)
+                    }
+                    style={[styles.input, !isEditing && styles.inputDisabled]}
+                    editable={isEditing}
+                  />
+                  {errors.fish?.[index]?.quantity && (
+                    <Text style={styles.errorText}>
+                      {errors.fish[index]?.quantity?.message as string}
+                    </Text>
+                  )}
+                </View>
+              )}
+            />
+
+            {/* Unit dropdown */}
+            <Controller
+              control={control}
+              name={`fish.${index}.unit`}
+              render={({ field: { value, onChange } }) => (
+                <View style={styles.fieldGroup}>
+                  <Text style={styles.label}>Đơn vị</Text>
+                  <Select
+                    options={UNITS_OPTIONS.map((unit) => ({
+                      label: unit.label,
+                      value: unit.value,
+                    }))}
+                    value={value}
+                    onChange={onChange}
+                    placeholder="Chọn đơn vị"
+                    disabled={!isEditing}
+                    listStyle={{ maxHeight: 100 }}
+                  />
+                  {errors.fish?.[index]?.unit && (
+                    <Text style={styles.errorText}>
+                      {errors.fish[index]?.unit?.message as string}
+                    </Text>
+                  )}
+                </View>
+              )}
+            />
+
+            {/* Size (optional) */}
+            <Controller
+              control={control}
+              name={`fish.${index}.size`}
+              render={({ field: { value, onChange, onBlur } }) => (
+                <View style={styles.fieldGroup}>
+                  <Text style={styles.label}>Kích thước (cm) — tùy chọn</Text>
+                  <TextInput
+                    keyboardType="numeric"
+                    value={value ? String(value) : ""}
+                    onBlur={onBlur}
+                    onChangeText={(t) =>
+                      onChange(t ? Number(t.replace(/,/g, ".")) : undefined)
+                    }
+                    style={[styles.input, !isEditing && styles.inputDisabled]}
+                    editable={isEditing}
+                  />
+                  {errors.fish?.[index]?.size && (
+                    <Text style={styles.errorText}>
+                      {errors.fish[index]?.size?.message as string}
+                    </Text>
+                  )}
+                </View>
+              )}
+            />
+          </View>
+        )}
       </View>
     );
   };
@@ -257,31 +433,81 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
       presentationStyle="pageSheet"
       onRequestClose={onClose}
     >
-      <Text>{isCreateMode ? "Create Haul" : "Update Haul"}</Text>
+      <KeyboardAvoidingView
-      <InfoSection fishingLog={fishingLog!} stt={fishingLogIndex} />
+        style={{ flex: 1 }}
-      <FlatList
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
-        data={fields}
+        keyboardVerticalOffset={60}
-        keyExtractor={(it) => it._id}
+      >
-        renderItem={renderRow}
+        <View style={styles.container}>
-        ListFooterComponent={
+          {/* Header */}
-          <View style={{ marginTop: 8 }}>
+          <View style={styles.header}>
-            <Button
+            <Text style={styles.title}>
-              title="Thêm loài cá"
+              {isCreateMode ? "Thêm mẻ cá" : "Chỉnh sửa mẻ cá"}
-              onPress={() => append(defaultItem())}
+            </Text>
-            />
+            <View style={styles.headerButtons}>
+              {isEditing ? (
+                <>
+                  <TouchableOpacity
+                    onPress={() => {
+                      setIsEditing(false);
+                      reset(); // reset to previous values
+                    }}
+                    style={[styles.saveButton, { backgroundColor: "#6c757d" }]}
+                  >
+                    <Text style={styles.saveButtonText}>Hủy</Text>
+                  </TouchableOpacity>
+                  <TouchableOpacity
+                    onPress={handleSubmit(onSubmit)}
+                    style={styles.saveButton}
+                  >
+                    <Text style={styles.saveButtonText}>Lưu</Text>
+                  </TouchableOpacity>
+                </>
+              ) : (
+                !isCreateMode && (
+                  <TouchableOpacity
+                    onPress={() => setIsEditing(true)}
+                    style={[styles.saveButton, { backgroundColor: "#17a2b8" }]}
+                  >
+                    <Text style={styles.saveButtonText}>Sửa</Text>
+                  </TouchableOpacity>
+                )
+              )}
+              <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+                <View style={styles.closeIconButton}>
+                  <IconSymbol name="xmark" size={24} color="#fff" />
+                </View>
+              </TouchableOpacity>
+            </View>
           </View>
-        }
-      />
 
-      {errors.fish && (
+          {/* Content */}
-        <Text style={{ color: "red", marginTop: 8 }}>
+          <ScrollView style={styles.content}>
-          {(errors.fish as any)?.message}
+            {/* Info Section */}
-        </Text>
+            <InfoSection fishingLog={fishingLog!} stt={fishingLogIndex} />
-      )}
 
-      <View style={{ marginTop: 16 }}>
+            {/* Fish List */}
-        <Button title="Lưu thu hoạch" onPress={handleSubmit(onSubmit)} />
+            {fields.map((item, index) => renderRow(item, index))}
-      </View>
+
+            {/* Add Button - only show when editing */}
+            {isEditing && (
+              <TouchableOpacity
+                onPress={() => append(defaultItem())}
+                style={styles.addButton}
+              >
+                <Text style={styles.addButtonText}>+ Thêm loài cá</Text>
+              </TouchableOpacity>
+            )}
+
+            {/* Error Message */}
+            {errors.fish && (
+              <Text style={styles.errorText}>
+                {(errors.fish as any)?.message}
+              </Text>
+            )}
+          </ScrollView>
+        </View>
+      </KeyboardAvoidingView>
     </Modal>
   );
 };

components/tripInfo/modal/style/CreateOrUpdateHaulModal.styles.ts

@@ -0,0 +1,179 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#f5f5f5",
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 20,
+    paddingTop: 30,
+    paddingBottom: 16,
+    backgroundColor: "#fff",
+    borderBottomWidth: 1,
+    borderBottomColor: "#eee",
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: "700",
+    color: "#000",
+    flex: 1,
+  },
+  headerButtons: {
+    flexDirection: "row",
+    gap: 12,
+    alignItems: "center",
+  },
+  closeButton: {
+    padding: 4,
+  },
+  closeIconButton: {
+    backgroundColor: "#FF3B30",
+    borderRadius: 10,
+    padding: 10,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  saveButton: {
+    backgroundColor: "#007bff",
+    borderRadius: 8,
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  saveButtonText: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+  content: {
+    flex: 1,
+    padding: 16,
+    marginBottom: 15,
+  },
+  fishCard: {
+    backgroundColor: "#fff",
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 16,
+    shadowColor: "#000",
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 2,
+  },
+
+  fishCardHeaderContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  fishCardTitle: {
+    fontSize: 16,
+    fontWeight: "700",
+    color: "#000",
+  },
+  fishCardSubtitle: {
+    fontSize: 15,
+    color: "#ff6600",
+    fontWeight: "500",
+  },
+  fieldGroup: {
+    marginBottom: 14,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#333",
+    marginBottom: 6,
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ddd",
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 16,
+    backgroundColor: "#fff",
+    color: "#000",
+  },
+  inputDisabled: {
+    backgroundColor: "#f5f5f5",
+    color: "#999",
+    borderColor: "#eee",
+  },
+  errorText: {
+    color: "#dc3545",
+    fontSize: 12,
+    marginTop: 4,
+    fontWeight: "500",
+  },
+  buttonRow: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    gap: 8,
+    marginTop: 12,
+  },
+  removeButton: {
+    backgroundColor: "#dc3545",
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  removeButtonText: {
+    color: "#fff",
+    fontSize: 14,
+    fontWeight: "600",
+  },
+  addButton: {
+    backgroundColor: "#007AFF",
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 12,
+    justifyContent: "center",
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 2,
+  },
+  addButtonText: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#fff",
+  },
+  footerSection: {
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    backgroundColor: "#fff",
+    borderTopWidth: 1,
+    borderTopColor: "#eee",
+  },
+  saveButtonLarge: {
+    backgroundColor: "#007bff",
+    borderRadius: 8,
+    paddingVertical: 14,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  saveButtonLargeText: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "700",
+  },
+  emptyStateText: {
+    textAlign: "center",
+    color: "#999",
+    fontSize: 14,
+    marginTop: 20,
+  },
+});
+
+export default styles;

controller/TripController.ts

@@ -2,6 +2,7 @@ import { api } from "@/config";
 import {
   API_GET_TRIP,
   API_HAUL_HANDLE,
+  API_UPDATE_FISHING_LOGS,
   API_UPDATE_TRIP_STATUS,
 } from "@/constants";
 
@@ -16,3 +17,7 @@ export async function queryUpdateTripState(body: Model.TripUpdateStateRequest) {
 export async function queryStartNewHaul(body: Model.NewFishingLogRequest) {
   return api.put(API_HAUL_HANDLE, body);
 }
+
+export async function queryUpdateFishingLogs(body: Model.FishingLog) {
+  return api.put(API_UPDATE_FISHING_LOGS, body);
+}

controller/typings.d.ts

@@ -152,8 +152,8 @@ declare namespace Model {
   interface FishingLog {
     fishing_log_id: string;
     trip_id: string;
-    start_at: string; // ISO datetime
+    start_at: Date; // ISO datetime
-    end_at: string; // ISO datetime
+    end_at: Date; // ISO datetime
     start_lat: number;
     start_lon: number;
     haul_lat: number;