update style CreateOrUpdateHaulModal

cập nhật modal add/edit fishingLog và sửa lỗi event ở map
2025-11-08 01:08:29 +07:00 · 2025-11-07 18:54:44 +07:00
11 changed files with 761 additions and 358 deletions
--- a/app/(tabs)/_layout.tsx
+++ b/app/(tabs)/_layout.tsx
@@ -1,12 +1,32 @@
-import { Tabs } from "expo-router";
+import { Tabs, useSegments } from "expo-router";

 import { HapticTab } from "@/components/haptic-tab";
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { Colors } from "@/constants/theme";
 import { useColorScheme } from "@/hooks/use-color-scheme";
+import { startEvents, stopEvents } from "@/services/device_events";
+import { useEffect, useRef } from "react";

 export default function TabLayout() {
  const colorScheme = useColorScheme();
+  const segments = useSegments();
+  const prev = useRef<string | null>(null);
+  const currentSegment = segments[1] ?? segments[segments.length - 1] ?? null; // tuỳ cấu trúc của bạn
+  useEffect(() => {
+    if (prev.current !== currentSegment) {
+      // console.log("Tab changed ->", { from: prev.current, to: currentSegment });
+      // TODO: xử lý khi chuyển tab ở đây
+      if (prev.current === "(tabs)" && currentSegment !== "(tabs)") {
+        stopEvents();
+        // 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");
+      }
+      prev.current = currentSegment;
+    }
+  }, [currentSegment]);

  return (
    <Tabs
--- a/app/(tabs)/diary.tsx
+++ b/app/(tabs)/diary.tsx
@@ -9,7 +9,7 @@ export default function Warning() {
    <SafeAreaView style={{ flex: 1 }}>
      <View style={styles.container}>
        <CreateOrUpdateHaulModal
-          haulData={null}
+          fishingLog={fishingLogData}
          isVisible={isShowModal}
          onClose={function (): void {
            setIsShowModal(false);
@@ -54,105 +54,118 @@ const styles = StyleSheet.create({
  },
 });

-const fishingInfoDatas: Model.FishingLogInfo[] = [
+const fishingLogData:Model.FishingLog = {
+  fishing_log_id: "124b2701-a5d6-4eb0-ba3b-6789473c14a9",
+  trip_id: "d84caab6-ebb0-4cf7-abf9-31e5617d23b9",
+  start_at: "2025-11-07T10:50:01.693193764Z",
+  end_at: "2025-11-07T10:50:31.693027729Z",
+  start_lat: 11.59141,
+  start_lon: 109.0489,
+  haul_lat: 11.590274,
+  haul_lon: 109.049284,
+  status: 1,
+  weather_description: "Stormy",
+  info: [
    {
-    fish_species_id: 10,
-    fish_name: "Cá quỷ biển (Barracuda)",
-    catch_number: 820,
+      fish_species_id: 8,
+      fish_name: "Cá hồng phớn",
+      catch_number: 1309,
      catch_unit: "kg",
-    fish_size: 29,
+      fish_size: 173,
+      fish_rarity: 3,
+      fish_condition: "Còn sống",
+      gear_usage: "Câu vàng",
+    },
+    {
+      fish_species_id: 18,
+      fish_name: "Cá đuối quạt",
+      catch_number: 731,
+      catch_unit: "kg",
+      fish_size: 16,
+      fish_rarity: 4,
+      fish_condition: "Chết",
+      gear_usage: "Bẫy lưới",
+    },
+    {
+      fish_species_id: 7,
+      fish_name: "Cá bơn vàng",
+      catch_number: 1224,
+      catch_unit: "kg",
+      fish_size: 12,
      fish_rarity: 1,
-    fish_condition: "Bị thương",
+      fish_condition: "Chết",
      gear_usage: "",
    },
    {
-    fish_species_id: 1,
-    fish_name: "Cá thu",
-    catch_number: 1293,
+      fish_species_id: 16,
+      fish_name: "Cá rồng biển",
+      catch_number: 838,
      catch_unit: "kg",
-    fish_size: 37,
-    fish_rarity: 1,
+      fish_size: 164,
+      fish_rarity: 3,
+      fish_condition: "Chết",
+      gear_usage: "Lưới rê",
+    },
+    {
+      fish_species_id: 9,
+      fish_name: "Cá hổ Napoleon",
+      catch_number: 1410,
+      catch_unit: "kg",
+      fish_size: 104,
+      fish_rarity: 4,
+      fish_condition: "Bị thương",
+      gear_usage: "Câu vàng",
+    },
+    {
+      fish_species_id: 3,
+      fish_name: "Cá chim trắng",
+      catch_number: 1184,
+      catch_unit: "kg",
+      fish_size: 104,
+      fish_rarity: 2,
+      fish_condition: "Còn sống",
+      gear_usage: "",
+    },
+    {
+      fish_species_id: 5,
+      fish_name: "Cá mú đỏ",
+      catch_number: 987,
+      catch_unit: "kg",
+      fish_size: 171,
+      fish_rarity: 2,
      fish_condition: "Bị thương",
      gear_usage: "",
    },
    {
      fish_species_id: 13,
      fish_name: "Cá song đỏ",
-    catch_number: 1738,
+      catch_number: 1676,
      catch_unit: "kg",
-    fish_size: 28,
+      fish_size: 99,
      fish_rarity: 2,
-    fish_condition: "Còn sống",
+      fish_condition: "Bị thương",
      gear_usage: "",
    },
    {
-    fish_species_id: 17,
-    fish_name: "Cá nược",
-    catch_number: 690,
+      fish_species_id: 11,
+      fish_name: "Cá ngừ đại dương",
+      catch_number: 462,
      catch_unit: "kg",
-    fish_size: 63,
+      fish_size: 11,
      fish_rarity: 1,
-    fish_condition: "Chết",
+      fish_condition: "Bị thương",
      gear_usage: "",
    },
    {
-    fish_species_id: 19,
-    fish_name: "Cá hổ Thái Lan",
-    catch_number: 825,
+      fish_species_id: 2,
+      fish_name: "Cá nục",
+      catch_number: 496,
      catch_unit: "kg",
-    fish_size: 55,
-    fish_rarity: 4,
-    fish_condition: "Chết",
-    gear_usage: "Câu tay",
-  },
-  {
-    fish_species_id: 8,
-    fish_name: "Cá hồng phớn",
-    catch_number: 1409,
-    catch_unit: "kg",
-    fish_size: 172,
-    fish_rarity: 3,
-    fish_condition: "Chết",
-    gear_usage: "Bẫy lưới",
-  },
-  {
-    fish_species_id: 16,
-    fish_name: "Cá rồng biển",
-    catch_number: 1426,
-    catch_unit: "kg",
-    fish_size: 105,
-    fish_rarity: 3,
-    fish_condition: "Chết",
-    gear_usage: "Lưới rê",
-  },
-  {
-    fish_species_id: 3,
-    fish_name: "Cá chim trắng",
-    catch_number: 176,
-    catch_unit: "kg",
-    fish_size: 83,
-    fish_rarity: 2,
-    fish_condition: "Chết",
-    gear_usage: "",
-  },
-  {
-    fish_species_id: 14,
-    fish_name: "Cá mú cườm",
-    catch_number: 724,
-    catch_unit: "kg",
-    fish_size: 36,
-    fish_rarity: 2,
-    fish_condition: "Chết",
-    gear_usage: "",
-  },
-  {
-    fish_species_id: 18,
-    fish_name: "Cá đuối quạt",
-    catch_number: 1712,
-    catch_unit: "kg",
-    fish_size: 105,
-    fish_rarity: 4,
+      fish_size: 125,
+      fish_rarity: 1,
      fish_condition: "Còn sống",
-    gear_usage: "Câu vàng",
+      gear_usage: "",
    },
-];
+  ],
+  sync: true,
+};
--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@@ -4,10 +4,27 @@ import { PolygonWithLabel } from "@/components/map/PolygonWithLabel";
 import type { PolylineWithLabelProps } from "@/components/map/PolylineWithLabel";
 import { PolylineWithLabel } from "@/components/map/PolylineWithLabel";
 import SosButton from "@/components/map/SosButton";
-import { ENTITY, IOS_PLATFORM, LIGHT_THEME } from "@/constants";
+import {
+  ENTITY,
+  EVENT_ALARM_DATA,
+  EVENT_BANZONE_DATA,
+  EVENT_ENTITY_DATA,
+  EVENT_GPS_DATA,
+  EVENT_TRACK_POINTS_DATA,
+  IOS_PLATFORM,
+  LIGHT_THEME,
+} from "@/constants";
 import { useColorScheme } from "@/hooks/use-color-scheme.web";
 import { usePlatform } from "@/hooks/use-platform";
+import {
+  getAlarmEventBus,
+  getBanzonesEventBus,
+  getEntitiesEventBus,
+  getGpsEventBus,
+  getTrackPointsEventBus,
+} from "@/services/device_events";
 import { getShipIcon } from "@/services/map_service";
+import eventBus from "@/utils/eventBus";
 import {
  convertWKTLineStringToLatLngArray,
  convertWKTtoLatLngString,
@@ -39,74 +56,69 @@ export default function HomeScreen() {
  const scale = useRef(new Animated.Value(0)).current;
  const opacity = useRef(new Animated.Value(1)).current;

-  // console.log("Platform: ", platform);
-  // console.log("Theme: ", theme);
+  useEffect(() => {
+    getGpsEventBus();
+    getAlarmEventBus();
+    getEntitiesEventBus();
+    getBanzonesEventBus();
+    getTrackPointsEventBus();
+    const queryGpsData = (gpsData: Model.GPSResponse) => {
+      if (gpsData) {
+        // console.log("GPS Data: ", gpsData);
+        setGpsData(gpsData);
+      } else {
+        setGpsData(null);
+        setPolygonCoordinates([]);
+        setPolylineCoordinates(null);
+      }
+    };
+    const queryAlarmData = (alarmData: Model.AlarmResponse) => {
+      // console.log("Alarm Data: ", alarmData.alarms.length);
+      setAlarmData(alarmData);
+    };
+    const queryEntityData = (entityData: Model.TransformedEntity[]) => {
+      // console.log("Entities Length Data: ", entityData.length);
+      setEntityData(entityData);
+    };
+    const queryBanzonesData = (banzoneData: Model.Zone[]) => {
+      // console.log("Banzone Data: ", banzoneData.length);

-  // const [number, setNumber] = useState(0);
+      setBanzoneData(banzoneData);
+    };
+    const queryTrackPointsData = (TrackPointsData: Model.ShipTrackPoint[]) => {
+      // console.log("TrackPoints Data: ", TrackPointsData.length);
+      if (TrackPointsData && TrackPointsData.length > 0) {
+        setTrackPointsData(TrackPointsData);
+      } else {
+        setTrackPointsData(null);
+      }
+    };

-  // useEffect(() => {
-  //   getGpsEventBus();
-  //   getAlarmEventBus();
-  //   getEntitiesEventBus();
-  //   getBanzonesEventBus();
-  //   getTrackPointsEventBus();
-  //   const queryGpsData = (gpsData: Model.GPSResponse) => {
-  //     if (gpsData) {
-  //       // console.log("GPS Data: ", gpsData);
-  //       setGpsData(gpsData);
-  //     } else {
-  //       setGpsData(null);
-  //       setPolygonCoordinates([]);
-  //       setPolylineCoordinates(null);
-  //     }
-  //   };
-  //   const queryAlarmData = (alarmData: Model.AlarmResponse) => {
-  //     // console.log("Alarm Data: ", alarmData.alarms.length);
-  //     setAlarmData(alarmData);
-  //   };
-  //   const queryEntityData = (entityData: Model.TransformedEntity[]) => {
-  //     // console.log("Entities Length Data: ", entityData.length);
-  //     setEntityData(entityData);
-  //   };
-  //   const queryBanzonesData = (banzoneData: Model.Zone[]) => {
-  //     // console.log("Banzone Data: ", banzoneData.length);
+    eventBus.on(EVENT_GPS_DATA, queryGpsData);
+    // console.log("Registering event handlers in HomeScreen");
+    eventBus.on(EVENT_GPS_DATA, queryGpsData);
+    // console.log("Subscribed to EVENT_GPS_DATA");
+    eventBus.on(EVENT_ALARM_DATA, queryAlarmData);
+    // console.log("Subscribed to EVENT_ALARM_DATA");
+    eventBus.on(EVENT_ENTITY_DATA, queryEntityData);
+    // console.log("Subscribed to EVENT_ENTITY_DATA");
+    eventBus.on(EVENT_TRACK_POINTS_DATA, queryTrackPointsData);
+    // console.log("Subscribed to EVENT_TRACK_POINTS_DATA");
+    eventBus.once(EVENT_BANZONE_DATA, queryBanzonesData);
+    // console.log("Subscribed once to EVENT_BANZONE_DATA");

-  //     setBanzoneData(banzoneData);
-  //   };
-  //   const queryTrackPointsData = (TrackPointsData: Model.ShipTrackPoint[]) => {
-  //     // console.log("TrackPoints Data: ", TrackPointsData.length);
-  //     if (TrackPointsData && TrackPointsData.length > 0) {
-  //       setTrackPointsData(TrackPointsData);
-  //     } else {
-  //       setTrackPointsData(null);
-  //     }
-  //   };
-
-  //   eventBus.on(EVENT_GPS_DATA, queryGpsData);
-  //   // console.log("Registering event handlers in HomeScreen");
-  //   eventBus.on(EVENT_GPS_DATA, queryGpsData);
-  //   // console.log("Subscribed to EVENT_GPS_DATA");
-  //   eventBus.on(EVENT_ALARM_DATA, queryAlarmData);
-  //   // console.log("Subscribed to EVENT_ALARM_DATA");
-  //   eventBus.on(EVENT_ENTITY_DATA, queryEntityData);
-  //   // console.log("Subscribed to EVENT_ENTITY_DATA");
-  //   eventBus.on(EVENT_TRACK_POINTS_DATA, queryTrackPointsData);
-  //   // console.log("Subscribed to EVENT_TRACK_POINTS_DATA");
-  //   eventBus.once(EVENT_BANZONE_DATA, queryBanzonesData);
-  //   // console.log("Subscribed once to EVENT_BANZONE_DATA");
-
-  //   return () => {
-  //     // console.log("Unregistering event handlers in HomeScreen");
-  //     eventBus.off(EVENT_GPS_DATA, queryGpsData);
-  //     // console.log("Unsubscribed EVENT_GPS_DATA");
-  //     eventBus.off(EVENT_ALARM_DATA, queryAlarmData);
-  //     // console.log("Unsubscribed EVENT_ALARM_DATA");
-  //     eventBus.off(EVENT_ENTITY_DATA, queryEntityData);
-  //     // console.log("Unsubscribed EVENT_ENTITY_DATA");
-  //     eventBus.off(EVENT_TRACK_POINTS_DATA, queryTrackPointsData);
-  //     // console.log("Unsubscribed EVENT_TRACK_POINTS_DATA");
-  //   };
-  // }, []);
+    return () => {
+      // console.log("Unregistering event handlers in HomeScreen");
+      eventBus.off(EVENT_GPS_DATA, queryGpsData);
+      // console.log("Unsubscribed EVENT_GPS_DATA");
+      eventBus.off(EVENT_ALARM_DATA, queryAlarmData);
+      // console.log("Unsubscribed EVENT_ALARM_DATA");
+      eventBus.off(EVENT_ENTITY_DATA, queryEntityData);
+      // console.log("Unsubscribed EVENT_ENTITY_DATA");
+      eventBus.off(EVENT_TRACK_POINTS_DATA, queryTrackPointsData);
+      // console.log("Unsubscribed EVENT_TRACK_POINTS_DATA");
+    };
+  }, []);

  useEffect(() => {
    setPolylineCoordinates(null);
@@ -162,7 +174,7 @@ export default function HomeScreen() {
          // foundPolygon = true;
          const coordinates = convertWKTtoLatLngString(geom_poly || "");
          if (coordinates.length > 0) {
-            console.log("Polygon Coordinate: ", coordinates);
+            // console.log("Polygon Coordinate: ", coordinates);
            setPolygonCoordinates(
              coordinates.map((polygon) => ({
                coordinates: polygon.map((coord) => ({
--- a/components/ButtonCreateNewHaulOrTrip.tsx
+++ b/components/ButtonCreateNewHaulOrTrip.tsx
@@ -94,7 +94,7 @@ const ButtonCreateNewHaulOrTrip: React.FC<StartButtonProps> = ({
      });
      if (resp.status === 200) {
        showSuccessToast("Bắt đầu chuyến đi thành công!");
-        getTrip();
+        await getTrip();
      }
    } catch (error) {
      console.error("Error stating trip :", error);
@@ -125,7 +125,7 @@ const ButtonCreateNewHaulOrTrip: React.FC<StartButtonProps> = ({
      const resp = await queryStartNewHaul(body);
      if (resp.status === 200) {
        showSuccessToast("Bắt đầu mẻ lưới mới thành công!");
-        getTrip();
+        await getTrip();
      } else {
        showErrorToast("Tạo mẻ lưới mới thất bại!");
      }
@@ -173,7 +173,8 @@ const ButtonCreateNewHaulOrTrip: React.FC<StartButtonProps> = ({
        </IconButton>
      )}
      <CreateOrUpdateHaulModal
-        haulData={null}
+        fishingLog={trip?.fishing_logs?.find((f) => f.status === 0)!}
+        fishingLogIndex={trip?.fishing_logs?.length!}
        isVisible={isFinishHaulModalOpen}
        onClose={function (): void {
          setIsFinishHaulModalOpen(false);
--- a/components/tripInfo/NetListTable.tsx
+++ b/components/tripInfo/NetListTable.tsx
@@ -3,7 +3,7 @@ import { useFishes } from "@/state/use-fish";
 import { useTrip } from "@/state/use-trip";
 import React, { useEffect, useRef, useState } from "react";
 import { Animated, Text, TouchableOpacity, View } from "react-native";
-import NetDetailModal from "./modal/NetDetailModal/NetDetailModal";
+import CreateOrUpdateHaulModal from "./modal/CreateOrUpdateHaulModal";
 import styles from "./style/NetListTable.styles";

 const NetListTable: React.FC = () => {
@@ -17,8 +17,11 @@ const NetListTable: React.FC = () => {
  useEffect(() => {
    getFishSpecies();
  }, []);
-  const data: Model.FishingLog[] = trip?.fishing_logs ?? [];
-  const tongSoMe = data.length;
+
+  // useEffect(() => {
+  //   console.log("Trip thay đổi: ", trip?.fishing_logs?.length);
+  // }, [trip]);
+  // const data: Model.FishingLog[] = trip?.fishing_logs ?? [];

  const handleToggle = () => {
    const toValue = collapsed ? contentHeight : 0;
@@ -31,7 +34,7 @@ const NetListTable: React.FC = () => {
  };

  const handleStatusPress = (id: string) => {
-    const net = data.find((item) => item.fishing_log_id === id);
+    const net = trip?.fishing_logs?.find((item) => item.fishing_log_id === id);
    if (net) {
      setSelectedNet(net);
      setModalVisible(true);
@@ -47,7 +50,11 @@ const NetListTable: React.FC = () => {
        style={styles.headerRow}
      >
        <Text style={styles.title}>Danh sách mẻ lưới</Text>
-        {collapsed && <Text style={styles.totalCollapsed}>{tongSoMe}</Text>}
+        {collapsed && (
+          <Text style={styles.totalCollapsed}>
+            {trip?.fishing_logs?.length}
+          </Text>
+        )}
        <IconSymbol
          name={collapsed ? "chevron.down" : "chevron.up"}
          size={16}
@@ -60,8 +67,18 @@ const NetListTable: React.FC = () => {
        style={{ position: "absolute", opacity: 0, zIndex: -1000 }}
        onLayout={(event) => {
          const height = event.nativeEvent.layout.height;
-          if (height > 0 && contentHeight === 0) {
+          // Update measured content height whenever it actually changes.
+          if (height > 0 && height !== contentHeight) {
            setContentHeight(height);
+            // If the panel is currently expanded, animate to the new height so
+            // newly added/removed rows become visible immediately.
+            if (!collapsed) {
+              Animated.timing(animatedHeight, {
+                toValue: height,
+                duration: 200,
+                useNativeDriver: false,
+              }).start();
+            }
          }
        }}
      >
@@ -72,7 +89,7 @@ const NetListTable: React.FC = () => {
        </View>

        {/* Body */}
-        {data.map((item, index) => (
+        {trip?.fishing_logs?.map((item, index) => (
          <View key={item.fishing_log_id} style={styles.row}>
            {/* Cột STT */}
            <Text style={styles.sttCell}>Mẻ {index + 1}</Text>
@@ -101,7 +118,7 @@ const NetListTable: React.FC = () => {
        </View>

        {/* Body */}
-        {data.map((item, index) => (
+        {trip?.fishing_logs?.map((item, index) => (
          <View key={item.fishing_log_id} style={styles.row}>
            {/* Cột STT */}
            <Text style={styles.sttCell}>Mẻ {index + 1}</Text>
@@ -120,23 +137,30 @@ const NetListTable: React.FC = () => {
          </View>
        ))}
      </Animated.View>
-
+      <CreateOrUpdateHaulModal
+        isVisible={modalVisible}
+        onClose={() => {
+          console.log("OnCLose");
+          setModalVisible(false);
+        }}
+        fishingLog={selectedNet}
+        fishingLogIndex={
+          selectedNet
+            ? trip!.fishing_logs!.findIndex(
+                (item) => item.fishing_log_id === selectedNet.fishing_log_id
+              ) + 1
+            : undefined
+        }
+      />
      {/* Modal chi tiết */}
-      <NetDetailModal
+      {/* <NetDetailModal
        visible={modalVisible}
        onClose={() => {
          console.log("OnCLose");
          setModalVisible(false);
        }}
        netData={selectedNet}
-        stt={
-          selectedNet
-            ? data.findIndex(
-                (item) => item.fishing_log_id === selectedNet.fishing_log_id
-              ) + 1
-            : undefined
-        }
-      />
+      /> */}
    </View>
  );
 };
--- a/components/tripInfo/modal/CreateOrUpdateHaulModal.tsx
+++ b/components/tripInfo/modal/CreateOrUpdateHaulModal.tsx
@@ -1,15 +1,26 @@
 import Select from "@/components/Select";
+import { IconSymbol } from "@/components/ui/icon-symbol";
 import { useFishes } from "@/state/use-fish";
 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 {
+  Modal,
+  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;
  onClose: () => void;
-  haulData?: Model.FishingLogInfo[] | null;
+  fishingLog?: Model.FishingLog | null;
+  fishingLogIndex?: number;
 }

 const UNITS = ["con", "kg", "tấn"] as const;
@@ -49,9 +60,14 @@ const defaultItem = (): FormValues["fish"][number] => ({
 const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
  isVisible,
  onClose,
-  haulData,
+  fishingLog,
+  fishingLogIndex,
 }) => {
-  const [isCreateMode, setIsCreateMode] = React.useState(!haulData);
+  const [isCreateMode, setIsCreateMode] = React.useState(!fishingLog?.info);
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [expandedFishIndices, setExpandedFishIndices] = React.useState<
+    number[]
+  >([]);
  const { control, handleSubmit, formState, watch, reset } =
    useForm<FormValues>({
      resolver: zodResolver(formSchema),
@@ -71,6 +87,12 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
    keyName: "_id", // tránh đụng key
  });

+  const handleToggleExpanded = (index: number) => {
+    setExpandedFishIndices((prev) =>
+      prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]
+    );
+  };
+
  const onSubmit = (values: FormValues) => {
    // Map form values to the FishingLogInfo-like shape the user requested
    const mapped = values.fish.map((f) => {
@@ -99,17 +121,21 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
      // when modal closed, clear form to default
      reset({ fish: [defaultItem()] });
      setIsCreateMode(true);
+      setIsEditing(false);
+      setExpandedFishIndices([]);
      return;
    }

-    // when modal opened, populate based on haulData
-    if (haulData === null) {
+    // when modal opened, populate based on fishingLog
+    if (fishingLog?.info === null) {
      // explicit null -> start with a single default item
      reset({ fish: [defaultItem()] });
      setIsCreateMode(true);
-    } else if (Array.isArray(haulData) && haulData.length > 0) {
+      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 = haulData.map((h) => ({
+      const mapped = fishingLog.info.map((h) => ({
        id: h.fish_species_id ?? -1,
        quantity: (h.catch_number as number) ?? 1,
        unit: (h.catch_unit as Unit) ?? (defaultItem().unit as Unit),
@@ -117,33 +143,114 @@ 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, haulData, reset]);
-  const renderRow = ({ item, index }: { item: any; index: number }) => {
+  }, [isVisible, fishingLog?.info, reset]);
+  const renderRow = (item: any, index: number) => {
+    const isExpanded = expandedFishIndices.includes(index);
+
    return (
+      <View key={item._id} style={styles.fishCard}>
+        {/* Delete + Chevron buttons - top right corner */}
        <View
          style={{
-          marginBottom: 12,
-          padding: 12,
-          borderWidth: 1,
-          borderRadius: 8,
+            position: "absolute",
+            top: 0,
+            right: 0,
+            zIndex: 9999,
+            flexDirection: "row",
+            alignItems: "center",
+            padding: 8,
+            gap: 8,
          }}
+          pointerEvents="box-none"
        >
-        <Text style={{ fontWeight: "600", marginBottom: 8 }}>
-          Loài cá #{index + 1}
-        </Text>
+          {isEditing && (
+            <TouchableOpacity
+              onPress={() => remove(index)}
+              style={{
+                backgroundColor: "#FF3B30",
+                borderRadius: 8,
+                width: 40,
+                height: 40,
+                justifyContent: "center",
+                alignItems: "center",
+                shadowColor: "#000",
+                shadowOpacity: 0.08,
+                shadowRadius: 2,
+                shadowOffset: { width: 0, height: 1 },
+                elevation: 2,
+              }}
+              hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
+              activeOpacity={0.7}
+            >
+              <IconSymbol name="trash" size={24} color="#fff" />
+            </TouchableOpacity>
+          )}
+          <TouchableOpacity
+            onPress={() => handleToggleExpanded(index)}
+            style={{
+              backgroundColor: "#007AFF",
+              borderRadius: 8,
+              width: 40,
+              height: 40,
+              justifyContent: "center",
+              alignItems: "center",
+              shadowColor: "#000",
+              shadowOpacity: 0.08,
+              shadowRadius: 2,
+              shadowOffset: { width: 0, height: 1 },
+              elevation: 2,
+            }}
+            hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
+            activeOpacity={0.7}
+          >
+            <IconSymbol
+              name={isExpanded ? "chevron.up" : "chevron.down"}
+              size={24}
+              color="#fff"
+            />
+          </TouchableOpacity>
+        </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 fishName ? (
+                <View style={styles.fishCardHeaderContent}>
+                  <Text style={styles.fishCardTitle}>{fishName}:</Text>
+                  <Text style={styles.fishCardSubtitle}>
+                    {quantity} {unit}
+                  </Text>
+                </View>
+              ) : null;
+            })()}
+          </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={{ marginBottom: 8 }}>
-              <Text style={{ marginBottom: 4 }}>Tên cá</Text>
+                <View style={styles.fieldGroup}>
+                  <Text style={styles.label}>Tên cá</Text>
                  <Select
                    options={fishSpecies!.map((fish) => ({
                      label: fish.name,
@@ -152,9 +259,10 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
                    value={value}
                    onChange={onChange}
                    placeholder="Chọn loài cá"
+                    disabled={!isEditing}
                  />
                  {errors.fish?.[index]?.id && (
-                <Text style={{ color: "red" }}>
+                    <Text style={styles.errorText}>
                      {errors.fish[index]?.id?.message as string}
                    </Text>
                  )}
@@ -167,8 +275,8 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
              control={control}
              name={`fish.${index}.quantity`}
              render={({ field: { value, onChange, onBlur } }) => (
-            <View style={{ marginBottom: 8 }}>
-              <Text style={{ marginBottom: 4 }}>Số lượng</Text>
+                <View style={styles.fieldGroup}>
+                  <Text style={styles.label}>Số lượng</Text>
                  <TextInput
                    keyboardType="numeric"
                    value={String(value ?? "")}
@@ -176,10 +284,11 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
                    onChangeText={(t) =>
                      onChange(Number(t.replace(/,/g, ".")) || 0)
                    }
-                style={{ padding: 10, borderWidth: 1, borderRadius: 6 }}
+                    style={[styles.input, !isEditing && styles.inputDisabled]}
+                    editable={isEditing}
                  />
                  {errors.fish?.[index]?.quantity && (
-                <Text style={{ color: "red" }}>
+                    <Text style={styles.errorText}>
                      {errors.fish[index]?.quantity?.message as string}
                    </Text>
                  )}
@@ -192,8 +301,8 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
              control={control}
              name={`fish.${index}.unit`}
              render={({ field: { value, onChange } }) => (
-            <View style={{ marginBottom: 8 }}>
-              <Text style={{ marginBottom: 4 }}>Đơn vị</Text>
+                <View style={styles.fieldGroup}>
+                  <Text style={styles.label}>Đơn vị</Text>
                  <Select
                    options={UNITS_OPTIONS.map((unit) => ({
                      label: unit.label,
@@ -202,9 +311,10 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
                    value={value}
                    onChange={onChange}
                    placeholder="Chọn đơn vị"
+                    disabled={!isEditing}
                  />
                  {errors.fish?.[index]?.unit && (
-                <Text style={{ color: "red" }}>
+                    <Text style={styles.errorText}>
                      {errors.fish[index]?.unit?.message as string}
                    </Text>
                  )}
@@ -217,10 +327,8 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
              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>
+                <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) : ""}
@@ -228,21 +336,19 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
                    onChangeText={(t) =>
                      onChange(t ? Number(t.replace(/,/g, ".")) : undefined)
                    }
-                style={{ padding: 10, borderWidth: 1, borderRadius: 6 }}
+                    style={[styles.input, !isEditing && styles.inputDisabled]}
+                    editable={isEditing}
                  />
                  {errors.fish?.[index]?.size && (
-                <Text style={{ color: "red" }}>
+                    <Text style={styles.errorText}>
                      {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>
+        )}
      </View>
    );
  };
@@ -254,29 +360,74 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
      presentationStyle="pageSheet"
      onRequestClose={onClose}
    >
-      <Text>{isCreateMode ? "Create Haul" : "Update Haul"}</Text>
-      <FlatList
-        data={fields}
-        keyExtractor={(it) => it._id}
-        renderItem={renderRow}
-        ListFooterComponent={
-          <View style={{ marginTop: 8 }}>
-            <Button
-              title="Thêm loài cá"
-              onPress={() => append(defaultItem())}
-            />
+      <View style={styles.container}>
+        {/* Header */}
+        <View style={styles.header}>
+          <Text style={styles.title}>
+            {isCreateMode ? "Thêm mẻ cá" : "Chỉnh sửa mẻ cá"}
+          </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>
-        }
-      />

+        {/* Content */}
+        <ScrollView style={styles.content}>
+          {/* Info Section */}
+          <InfoSection fishingLog={fishingLog!} stt={fishingLogIndex} />
+
+          {/* Fish List */}
+          {fields.map((item, index) => renderRow(item, index))}
+
+          {/* 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={{ color: "red", marginTop: 8 }}>
+            <Text style={styles.errorText}>
              {(errors.fish as any)?.message}
            </Text>
          )}
-
-      <View style={{ marginTop: 16 }}>
-        <Button title="Lưu thu hoạch" onPress={handleSubmit(onSubmit)} />
+        </ScrollView>
      </View>
    </Modal>
  );
--- a/components/tripInfo/modal/NetDetailModal/NetDetailModal.tsx
+++ b/components/tripInfo/modal/NetDetailModal/NetDetailModal.tsx
@@ -11,7 +11,6 @@ import {
 import styles from "../style/NetDetailModal.styles";
 import { CatchSectionHeader } from "./components/CatchSectionHeader";
 import { FishCardList } from "./components/FishCardList";
-import { InfoSection } from "./components/InfoSection";
 import { NotesSection } from "./components/NotesSection";

 interface NetDetailModalProps {
@@ -320,11 +319,11 @@ const NetDetailModal: React.FC<NetDetailModalProps> = ({
        {/* Content */}
        <ScrollView style={styles.content}>
          {/* Thông tin chung */}
-          <InfoSection
+          {/* <InfoSection
            netData={netData ?? undefined}
            isCompleted={isCompleted}
            stt={stt}
-          />
+          /> */}

          {/* Danh sách cá bắt được */}
          <CatchSectionHeader totalCatch={totalCatch} />
--- a/components/tripInfo/modal/NetDetailModal/components/InfoSection.tsx
+++ b/components/tripInfo/modal/NetDetailModal/components/InfoSection.tsx
@@ -3,53 +3,52 @@ import { Text, View } from "react-native";
 import styles from "../../style/NetDetailModal.styles";

 interface InfoSectionProps {
-  netData?: Model.FishingLog;
-  isCompleted: boolean;
+  fishingLog?: Model.FishingLog;
  stt?: number;
 }

 export const InfoSection: React.FC<InfoSectionProps> = ({
-  netData,
-  isCompleted,
+  fishingLog,
  stt,
 }) => {
-  if (!netData) {
+  if (!fishingLog) {
    return null;
  }
  const infoItems = [
    { label: "Số thứ tự", value: `Mẻ ${stt}` },
    {
      label: "Trạng thái",
-      value: netData.status === 1 ? "Đã hoàn thành" : "Chưa hoàn thành",
+      value: fishingLog.status === 1 ? "Đã hoàn thành" : "Chưa hoàn thành",
      isStatus: true,
    },
    {
      label: "Thời gian bắt đầu",
-      value: netData.start_at
-        ? new Date(netData.start_at).toLocaleString()
+      value: fishingLog.start_at
+        ? new Date(fishingLog.start_at).toLocaleString()
        : "Chưa cập nhật",
    },
    {
      label: "Thời gian kết thúc",
-      value: netData.start_at
-        ? new Date(netData.end_at).toLocaleString()
-        : "Chưa cập nhật",
+      value:
+        fishingLog.end_at !== "0001-01-01T00:00:00Z"
+          ? new Date(fishingLog.end_at).toLocaleString()
+          : "-",
    },
    // {
    //   label: "Vị trí hạ thu",
-    //   value: netData.viTriHaThu || "Chưa cập nhật",
+    //   value: fishingLog.viTriHaThu || "Chưa cập nhật",
    // },
    // {
    //   label: "Vị trí thu lưới",
-    //   value: netData.viTriThuLuoi || "Chưa cập nhật",
+    //   value: fishingLog.viTriThuLuoi || "Chưa cập nhật",
    // },
    // {
    //   label: "Độ sâu hạ thu",
-    //   value: netData.doSauHaThu || "Chưa cập nhật",
+    //   value: fishingLog.doSauHaThu || "Chưa cập nhật",
    // },
    // {
    //   label: "Độ sâu thu lưới",
-    //   value: netData.doSauThuLuoi || "Chưa cập nhật",
+    //   value: fishingLog.doSauThuLuoi || "Chưa cập nhật",
    // },
  ];

--- a/components/tripInfo/modal/style/CreateOrUpdateHaulModal.styles.ts
+++ b/components/tripInfo/modal/style/CreateOrUpdateHaulModal.styles.ts
@@ -0,0 +1,176 @@
+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: 14,
+    color: "#666",
+    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: "#28a745",
+    borderRadius: 8,
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    marginTop: 16,
+    justifyContent: "center",
+    alignItems: "center",
+    alignSelf: "flex-start",
+  },
+  addButtonText: {
+    color: "#fff",
+    fontSize: 14,
+    fontWeight: "600",
+  },
+  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;
--- a/controller/typings.d.ts
+++ b/controller/typings.d.ts
@@ -152,8 +152,8 @@ declare namespace Model {
  interface FishingLog {
    fishing_log_id: string;
    trip_id: string;
-    start_at: Date; // ISO datetime
-    end_at: Date; // ISO datetime
+    start_at: string; // ISO datetime
+    end_at: string; // ISO datetime
    start_lat: number;
    start_lon: number;
    haul_lat: number;
--- a/services/device_events.ts
+++ b/services/device_events.ts
@@ -162,3 +162,11 @@ export function stopEvents() {
    }
  });
 }
+
+export function startEvents() {
+  getGpsEventBus();
+  getAlarmEventBus();
+  getEntitiesEventBus();
+  getTrackPointsEventBus();
+  getBanzonesEventBus();
+}
Author	SHA1	Message	Date
MinhNN	c19cc7e00a	update style CreateOrUpdateHaulModal	2025-11-08 01:08:29 +07:00
Tran Anh Tuan	4d821646cf	cập nhật modal add/edit fishingLog và sửa lỗi event ở map	2025-11-07 18:54:44 +07:00