tadd select component

app/(tabs)/sensor.tsx

@@ -1,4 +1,5 @@
 import ScanQRCode from "@/components/ScanQRCode";
+import Select from "@/components/Select";
 import { useState } from "react";
 import {
   Platform,
@@ -21,13 +22,32 @@ export default function Sensor() {
   const handleScanPress = () => {
     setScanModalVisible(true);
   };
+  const [selectedValue, setSelectedValue] = useState<
+    string | number | undefined
+  >(undefined);
+
+  const options = [
+    { label: "Apple", value: "apple" },
+    { label: "Banana", value: "banana" },
+    { label: "Cherry", value: "cherry", disabled: true },
+  ];
 
   return (
     <SafeAreaView style={{ flex: 1 }}>
       <ScrollView contentContainerStyle={styles.scrollContent}>
         <View style={styles.container}>
           <Text style={styles.titleText}>Cảm biến trên tàu</Text>
-
+          <Select
+            style={{ width: "80%", marginBottom: 20 }}
+            options={options}
+            value={selectedValue}
+            onChange={(val) => {
+              setSelectedValue(val);
+              console.log("Value: ", val);
+            }}
+            placeholder="Select a fruit"
+            allowClear
+          />
           <Pressable style={styles.scanButton} onPress={handleScanPress}>
             <Text style={styles.scanButtonText}>📱 Scan QR Code</Text>
           </Pressable>

app/auth/login.tsx

@@ -1,8 +1,8 @@
 import { ThemedText } from "@/components/themed-text";
 import { ThemedView } from "@/components/themed-view";
-import { showToastError } from "@/config";
 import { TOKEN } from "@/constants";
 import { login } from "@/controller/AuthController";
+import { showErrorToast } from "@/services/toast_service";
 import {
   getStorageItem,
   removeStorageItem,
@@ -57,7 +57,7 @@ export default function LoginScreen() {
   const handleLogin = async () => {
     // Validate input
     if (!username.trim() || !password.trim()) {
-      showToastError("Lỗi", "Vui lòng nhập tài khoản và mật khẩu");
+      showErrorToast("Vui lòng nhập tài khoản và mật khẩu");
       return;
     }
 
@@ -81,8 +81,7 @@ export default function LoginScreen() {
         router.replace("/(tabs)");
       }
     } catch (error) {
-      showToastError(
+      showErrorToast(
-        "Lỗi",
         error instanceof Error ? error.message : "Đăng nhập thất bại"
       );
     } finally {

components/ButtonCreateNewHaulOrTrip.tsx

@@ -20,6 +20,12 @@ interface StartButtonProps {
   onPress?: () => void;
 }
 
+interface a {
+  fishingLogs?: Model.FishingLogInfo[] | null;
+  onCallback?: (fishingLogs: Model.FishingLogInfo[]) => void;
+  isEditing?: boolean;
+}
+
 const ButtonCreateNewHaulOrTrip: React.FC<StartButtonProps> = ({
   gpsData,
   onPress,

components/Select.tsx

@@ -0,0 +1,272 @@
+import { AntDesign } from "@expo/vector-icons";
+import React, { useEffect, useState } from "react";
+import {
+  ActivityIndicator,
+  ScrollView,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from "react-native";
+
+export interface SelectOption {
+  label: string;
+  value: string | number;
+  disabled?: boolean;
+}
+
+export interface SelectProps {
+  value?: string | number;
+  defaultValue?: string | number;
+  options: SelectOption[];
+  onChange?: (value: string | number | undefined) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  loading?: boolean;
+  allowClear?: boolean;
+  showSearch?: boolean;
+  mode?: "single" | "multiple"; // multiple not implemented yet
+  style?: StyleProp<ViewStyle>;
+  size?: "small" | "middle" | "large";
+}
+
+/**
+ * Select
+ * A Select component inspired by Ant Design, adapted for React Native.
+ * Supports single selection, search, clear, loading, disabled states.
+ */
+const Select: React.FC<SelectProps> = ({
+  value,
+  defaultValue,
+  options,
+  onChange,
+  placeholder = "Select an option",
+  disabled = false,
+  loading = false,
+  allowClear = false,
+  showSearch = false,
+  mode = "single",
+  style,
+  size = "middle",
+}) => {
+  const [selectedValue, setSelectedValue] = useState<
+    string | number | undefined
+  >(value ?? defaultValue);
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchText, setSearchText] = useState("");
+  const [containerHeight, setContainerHeight] = useState(0);
+
+  useEffect(() => {
+    setSelectedValue(value);
+  }, [value]);
+
+  const filteredOptions = showSearch
+    ? options.filter((opt) =>
+        opt.label.toLowerCase().includes(searchText.toLowerCase())
+      )
+    : options;
+
+  const selectedOption = options.find((opt) => opt.value === selectedValue);
+
+  const handleSelect = (val: string | number) => {
+    setSelectedValue(val);
+    onChange?.(val);
+    setIsOpen(false);
+    setSearchText("");
+  };
+
+  const handleClear = () => {
+    setSelectedValue(undefined);
+    onChange?.(undefined);
+  };
+
+  const sizeMap = {
+    small: { height: 32, fontSize: 14, paddingHorizontal: 10 },
+    middle: { height: 40, fontSize: 16, paddingHorizontal: 14 },
+    large: { height: 48, fontSize: 18, paddingHorizontal: 18 },
+  };
+
+  const sz = sizeMap[size];
+
+  return (
+    <View style={styles.wrapper}>
+      <TouchableOpacity
+        style={[
+          styles.container,
+          {
+            height: sz.height,
+            paddingHorizontal: sz.paddingHorizontal,
+            opacity: disabled ? 0.6 : 1,
+          },
+          style,
+        ]}
+        onPress={() => !disabled && !loading && setIsOpen(!isOpen)}
+        disabled={disabled || loading}
+        activeOpacity={0.8}
+        onLayout={(e) => setContainerHeight(e.nativeEvent.layout.height)}
+      >
+        <View style={styles.content}>
+          {loading ? (
+            <ActivityIndicator size="small" color="#4ecdc4" />
+          ) : (
+            <Text
+              style={[
+                styles.text,
+                {
+                  fontSize: sz.fontSize,
+                  color: selectedValue ? "#111" : "#999",
+                },
+              ]}
+              numberOfLines={1}
+            >
+              {selectedOption?.label || placeholder}
+            </Text>
+          )}
+        </View>
+        <View style={styles.suffix}>
+          {allowClear && selectedValue && !loading ? (
+            <TouchableOpacity onPress={handleClear} style={styles.icon}>
+              <AntDesign name="close" size={16} color="#999" />
+            </TouchableOpacity>
+          ) : null}
+          <AntDesign
+            name={isOpen ? "up" : "down"}
+            size={14}
+            color="#999"
+            style={styles.arrow}
+          />
+        </View>
+      </TouchableOpacity>
+
+      {isOpen && (
+        <View style={[styles.dropdown, { top: containerHeight }]}>
+          {showSearch && (
+            <TextInput
+              style={styles.searchInput}
+              placeholder="Search..."
+              value={searchText}
+              onChangeText={setSearchText}
+              autoFocus
+            />
+          )}
+          <ScrollView style={styles.list}>
+            {filteredOptions.map((item) => (
+              <TouchableOpacity
+                key={item.value}
+                style={[
+                  styles.option,
+                  item.disabled && styles.optionDisabled,
+                  selectedValue === item.value && styles.optionSelected,
+                ]}
+                onPress={() => !item.disabled && handleSelect(item.value)}
+                disabled={item.disabled}
+              >
+                <Text
+                  style={[
+                    styles.optionText,
+                    item.disabled && styles.optionTextDisabled,
+                    selectedValue === item.value && styles.optionTextSelected,
+                  ]}
+                >
+                  {item.label}
+                </Text>
+                {selectedValue === item.value && (
+                  <AntDesign name="check" size={16} color="#4ecdc4" />
+                )}
+              </TouchableOpacity>
+            ))}
+          </ScrollView>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: "relative",
+  },
+  container: {
+    borderWidth: 1,
+    borderColor: "#e6e6e6",
+    borderRadius: 8,
+    backgroundColor: "#fff",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  content: {
+    flex: 1,
+  },
+  text: {
+    color: "#111",
+  },
+  suffix: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  icon: {
+    marginRight: 8,
+  },
+  arrow: {
+    marginLeft: 4,
+  },
+  dropdown: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    backgroundColor: "#fff",
+    borderWidth: 1,
+    borderColor: "#e6e6e6",
+    borderTopWidth: 0,
+    borderRadius: 10,
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 8,
+    shadowColor: "#000",
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 5,
+    zIndex: 1000,
+  },
+  searchInput: {
+    borderWidth: 1,
+    borderColor: "#e6e6e6",
+    borderRadius: 4,
+    padding: 8,
+    margin: 8,
+  },
+  list: {
+    maxHeight: 200,
+  },
+  option: {
+    padding: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: "#f0f0f0",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  optionDisabled: {
+    opacity: 0.5,
+  },
+  optionSelected: {
+    backgroundColor: "#f6ffed",
+  },
+  optionText: {
+    fontSize: 16,
+    color: "#111",
+  },
+  optionTextDisabled: {
+    color: "#999",
+  },
+  optionTextSelected: {
+    color: "#4ecdc4",
+    fontWeight: "600",
+  },
+});
+
+export default Select;

components/tripInfo/CrewListTable.tsx

@@ -1,165 +1,10 @@
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { useTrip } from "@/state/use-trip";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { Animated, Text, TouchableOpacity, View } from "react-native";
 import CrewDetailModal from "./modal/CrewDetailModal";
 import styles from "./style/CrewListTable.styles";
 
-const mockCrews: Model.TripCrews[] = [
-  {
-    TripID: "f9884294-a7f2-46dc-aaf2-032da08a1ab6",
-    PersonalID: "480863197307",
-    role: "crew",
-    joined_at: new Date("2025-11-06T08:13:33.230053Z"),
-    left_at: null,
-    note: null,
-    Person: {
-      personal_id: "480863197307",
-      name: "Huỳnh Tấn Trang",
-      phone: "0838944284",
-      email: "huynhtantrang@crew.sgw.vn",
-      birth_date: new Date("2025-01-11T00:00:00Z"),
-      note: "",
-      address: "49915 Poplar Avenue",
-      created_at: new Date("0001-01-01T00:00:00Z"),
-      updated_at: new Date("0001-01-01T00:00:00Z"),
-    },
-  },
-  {
-    TripID: "f9884294-a7f2-46dc-aaf2-032da08a1ab6",
-    PersonalID: "714834545296",
-    role: "crew",
-    joined_at: new Date("2025-11-06T08:13:33.301376Z"),
-    left_at: null,
-    note: null,
-    Person: {
-      personal_id: "714834545296",
-      name: "Trương Văn Nam",
-      phone: "0773396753",
-      email: "truongvannam@crew.sgw.vn",
-      birth_date: new Date("2025-07-24T00:00:00Z"),
-      note: "",
-      address: "3287 Carlotta Underpass",
-      created_at: new Date("0001-01-01T00:00:00Z"),
-      updated_at: new Date("0001-01-01T00:00:00Z"),
-    },
-  },
-  {
-    TripID: "f9884294-a7f2-46dc-aaf2-032da08a1ab6",
-    PersonalID: "049299828990",
-    role: "crew",
-    joined_at: new Date("2025-11-06T08:13:33.373037Z"),
-    left_at: null,
-    note: null,
-    Person: {
-      personal_id: "049299828990",
-      name: "Đặng Anh Minh",
-      phone: "0827640820",
-      email: "danganhminh@crew.sgw.vn",
-      birth_date: new Date("2024-10-30T00:00:00Z"),
-      note: "",
-      address: "68909 Gerda Burgs",
-      created_at: new Date("0001-01-01T00:00:00Z"),
-      updated_at: new Date("0001-01-01T00:00:00Z"),
-    },
-  },
-  {
-    TripID: "f9884294-a7f2-46dc-aaf2-032da08a1ab6",
-    PersonalID: "851494873747",
-    role: "captain",
-    joined_at: new Date("2025-11-06T08:13:33.442774Z"),
-    left_at: null,
-    note: null,
-    Person: {
-      personal_id: "851494873747",
-      name: "Tô Thị Linh",
-      phone: "0337906041",
-      email: "tothilinh@crew.sgw.vn",
-      birth_date: new Date("2025-06-18T00:00:00Z"),
-      note: "",
-      address: "6676 Kulas Groves",
-      created_at: new Date("0001-01-01T00:00:00Z"),
-      updated_at: new Date("0001-01-01T00:00:00Z"),
-    },
-  },
-  {
-    TripID: "f9884294-a7f2-46dc-aaf2-032da08a1ab6",
-    PersonalID: "384839614682",
-    role: "crew",
-    joined_at: new Date("2025-11-06T08:13:33.515532Z"),
-    left_at: null,
-    note: null,
-    Person: {
-      personal_id: "384839614682",
-      name: "Lê Thanh Hoa",
-      phone: "0937613034",
-      email: "lethanhhoa@crew.sgw.vn",
-      birth_date: new Date("2025-07-17T00:00:00Z"),
-      note: "",
-      address: "244 Cicero Estate",
-      created_at: new Date("0001-01-01T00:00:00Z"),
-      updated_at: new Date("0001-01-01T00:00:00Z"),
-    },
-  },
-  {
-    TripID: "f9884294-a7f2-46dc-aaf2-032da08a1ab6",
-    PersonalID: "702319275290",
-    role: "crew",
-    joined_at: new Date("2025-11-06T08:13:33.588038Z"),
-    left_at: null,
-    note: null,
-    Person: {
-      personal_id: "702319275290",
-      name: "Nguyễn Phước Hải",
-      phone: "0347859214",
-      email: "nguyenphuochai@crew.sgw.vn",
-      birth_date: new Date("2025-08-13T00:00:00Z"),
-      note: "",
-      address: "6874 Devon Key",
-      created_at: new Date("0001-01-01T00:00:00Z"),
-      updated_at: new Date("0001-01-01T00:00:00Z"),
-    },
-  },
-  {
-    TripID: "f9884294-a7f2-46dc-aaf2-032da08a1ab6",
-    PersonalID: "943534816439",
-    role: "crew",
-    joined_at: new Date("2025-11-06T08:13:33.668984Z"),
-    left_at: null,
-    note: null,
-    Person: {
-      personal_id: "943534816439",
-      name: "Lý Hữu Hà",
-      phone: "0768548881",
-      email: "lyhuuha@crew.sgw.vn",
-      birth_date: new Date("2025-08-18T00:00:00Z"),
-      note: "",
-      address: "655 Middle Street",
-      created_at: new Date("0001-01-01T00:00:00Z"),
-      updated_at: new Date("0001-01-01T00:00:00Z"),
-    },
-  },
-  {
-    TripID: "f9884294-a7f2-46dc-aaf2-032da08a1ab6",
-    PersonalID: "096528446981",
-    role: "crew",
-    joined_at: new Date("2025-11-06T08:13:33.74379Z"),
-    left_at: null,
-    note: null,
-    Person: {
-      personal_id: "096528446981",
-      name: "Trần Xuân Thi",
-      phone: "0963449523",
-      email: "tranxuanthi@crew.sgw.vn",
-      birth_date: new Date("2024-09-21T00:00:00Z"),
-      note: "",
-      address: "59344 Burley Isle",
-      created_at: new Date("0001-01-01T00:00:00Z"),
-      updated_at: new Date("0001-01-01T00:00:00Z"),
-    },
-  },
-];
-
 const CrewListTable: React.FC = () => {
   const [collapsed, setCollapsed] = useState(true);
   const [contentHeight, setContentHeight] = useState<number>(0);
@@ -171,16 +16,10 @@ const CrewListTable: React.FC = () => {
 
   const { trip } = useTrip();
 
-  const data: Model.TripCrews[] = trip?.crews ?? mockCrews;
+  const data: Model.TripCrews[] = trip?.crews ?? [];
 
   const tongThanhVien = data.length;
 
-  // Reset animated height khi dữ liệu thay đổi
-  useEffect(() => {
-    setContentHeight(0); // Reset để tính lại chiều cao
-    setCollapsed(true); // Reset về trạng thái gập lại
-  }, [data]);
-
   const handleToggle = () => {
     const toValue = collapsed ? contentHeight : 0;
     Animated.timing(animatedHeight, {

components/tripInfo/FishingToolsList.tsx

@@ -1,6 +1,6 @@
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { useTrip } from "@/state/use-trip";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { Animated, Text, TouchableOpacity, View } from "react-native";
 import styles from "./style/FishingToolsTable.styles";
 
@@ -13,12 +13,6 @@ const FishingToolsTable: React.FC = () => {
   const data: Model.FishingGear[] = trip?.fishing_gears ?? [];
   const tongSoLuong = data.reduce((sum, item) => sum + Number(item.number), 0);
 
-  // Reset animated height khi dữ liệu thay đổi
-  useEffect(() => {
-    setContentHeight(0); // Reset để tính lại chiều cao
-    setCollapsed(true); // Reset về trạng thái gập lại
-  }, [data]);
-
   const handleToggle = () => {
     const toValue = collapsed ? contentHeight : 0;
     Animated.timing(animatedHeight, {

components/tripInfo/NetListTable.tsx

@@ -1,191 +1,23 @@
 import { IconSymbol } from "@/components/ui/icon-symbol";
-import React, { useRef, useState } from "react";
+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 styles from "./style/NetListTable.styles";
 
-// ---------------------------
-// 🧩 Interface
-// ---------------------------
-interface FishCatch {
-  fish_species_id: number;
-  fish_name: string;
-  catch_number: number;
-  catch_unit: string;
-  fish_size: number;
-  fish_rarity: number;
-  fish_condition: string;
-  gear_usage: string;
-}
-
-interface NetItem {
-  id: string;
-  stt: string;
-  trangThai: string;
-  thoiGianBatDau?: string;
-  thoiGianKetThuc?: string;
-  viTriHaThu?: string;
-  viTriThuLuoi?: string;
-  doSauHaThu?: string;
-  doSauThuLuoi?: string;
-  catchList?: FishCatch[];
-  ghiChu?: string;
-}
-
-// ---------------------------
-// 🧵 Dữ liệu mẫu
-// ---------------------------
-const data: NetItem[] = [
-  {
-    id: "1",
-    stt: "Mẻ 3",
-    trangThai: "Đã hoàn thành",
-    thoiGianBatDau: "08:00 - 01/11/2025",
-    thoiGianKetThuc: "12:30 - 01/11/2025",
-    viTriHaThu: "16°12'34\"N 107°56'12\"E",
-    viTriThuLuoi: "16°13'45\"N 107°57'23\"E",
-    doSauHaThu: "45m",
-    doSauThuLuoi: "48m",
-    catchList: [
-      {
-        fish_species_id: 3,
-        fish_name: "Cá chim trắng",
-        catch_number: 978,
-        catch_unit: "kg",
-        fish_size: 111,
-        fish_rarity: 2,
-        fish_condition: "Chết",
-        gear_usage: "",
-      },
-      {
-        fish_species_id: 13,
-        fish_name: "Cá song đỏ",
-        catch_number: 1061,
-        catch_unit: "kg",
-        fish_size: 154,
-        fish_rarity: 2,
-        fish_condition: "Còn sống",
-        gear_usage: "",
-      },
-      {
-        fish_species_id: 15,
-        fish_name: "Cá hồng",
-        catch_number: 613,
-        catch_unit: "kg",
-        fish_size: 199,
-        fish_rarity: 2,
-        fish_condition: "Còn sống",
-        gear_usage: "",
-      },
-    ],
-    ghiChu: "Thời tiết tốt, sản lượng cao",
-  },
-  {
-    id: "2",
-    stt: "Mẻ 2",
-    trangThai: "Đã hoàn thành",
-    thoiGianBatDau: "14:00 - 31/10/2025",
-    thoiGianKetThuc: "18:45 - 31/10/2025",
-    viTriHaThu: "16°10'20\"N 107°54'30\"E",
-    viTriThuLuoi: "16°11'30\"N 107°55'40\"E",
-    doSauHaThu: "40m",
-    doSauThuLuoi: "42m",
-    catchList: [
-      {
-        fish_species_id: 2,
-        fish_name: "Cá nục",
-        catch_number: 1102,
-        catch_unit: "kg",
-        fish_size: 12,
-        fish_rarity: 1,
-        fish_condition: "Bị thương",
-        gear_usage: "",
-      },
-      {
-        fish_species_id: 11,
-        fish_name: "Cá ngừ đại dương",
-        catch_number: 828,
-        catch_unit: "kg",
-        fish_size: 120,
-        fish_rarity: 1,
-        fish_condition: "Chết",
-        gear_usage: "",
-      },
-    ],
-    ghiChu: "Biển động nhẹ",
-  },
-  {
-    id: "3",
-    stt: "Mẻ 1",
-    trangThai: "Đã hoàn thành",
-    thoiGianBatDau: "06:30 - 31/10/2025",
-    thoiGianKetThuc: "11:00 - 31/10/2025",
-    viTriHaThu: "16°08'15\"N 107°52'45\"E",
-    viTriThuLuoi: "16°09'25\"N 107°53'55\"E",
-    doSauHaThu: "35m",
-    doSauThuLuoi: "38m",
-    catchList: [
-      {
-        fish_species_id: 6,
-        fish_name: "Cá mú trắng",
-        catch_number: 1620,
-        catch_unit: "kg",
-        fish_size: 75,
-        fish_rarity: 2,
-        fish_condition: "Chết",
-        gear_usage: "",
-      },
-      {
-        fish_species_id: 8,
-        fish_name: "Cá hồng phớn",
-        catch_number: 648,
-        catch_unit: "kg",
-        fish_size: 25,
-        fish_rarity: 3,
-        fish_condition: "Còn sống",
-        gear_usage: "Lưới rê",
-      },
-      {
-        fish_species_id: 9,
-        fish_name: "Cá hổ Napoleon",
-        catch_number: 1111,
-        catch_unit: "kg",
-        fish_size: 86,
-        fish_rarity: 4,
-        fish_condition: "Bị thương",
-        gear_usage: "Lưới rê",
-      },
-      {
-        fish_species_id: 17,
-        fish_name: "Cá nược",
-        catch_number: 1081,
-        catch_unit: "kg",
-        fish_size: 195,
-        fish_rarity: 1,
-        fish_condition: "Chết",
-        gear_usage: "",
-      },
-      {
-        fish_species_id: 18,
-        fish_name: "Cá đuối quạt",
-        catch_number: 1198,
-        catch_unit: "kg",
-        fish_size: 21,
-        fish_rarity: 4,
-        fish_condition: "Chết",
-        gear_usage: "Câu tay",
-      },
-    ],
-    ghiChu: "Mẻ lưới đầu tiên, sản lượng tốt",
-  },
-];
-
 const NetListTable: React.FC = () => {
   const [collapsed, setCollapsed] = useState(true);
   const [contentHeight, setContentHeight] = useState<number>(0);
   const animatedHeight = useRef(new Animated.Value(0)).current;
   const [modalVisible, setModalVisible] = useState(false);
-  const [selectedNet, setSelectedNet] = useState<NetItem | null>(null);
+  const [selectedNet, setSelectedNet] = useState<Model.FishingLog | null>(null);
+  const { trip } = useTrip();
+  const { fishSpecies, getFishSpecies } = useFishes();
+  useEffect(() => {
+    getFishSpecies();
+  }, []);
+  const data: Model.FishingLog[] = trip?.fishing_logs ?? [];
   const tongSoMe = data.length;
 
   const handleToggle = () => {
@@ -199,7 +31,7 @@ const NetListTable: React.FC = () => {
   };
 
   const handleStatusPress = (id: string) => {
-    const net = data.find((item) => item.id === id);
+    const net = data.find((item) => item.fishing_log_id === id);
     if (net) {
       setSelectedNet(net);
       setModalVisible(true);
@@ -240,16 +72,20 @@ const NetListTable: React.FC = () => {
         </View>
 
         {/* Body */}
-        {data.map((item) => (
+        {data.map((item, index) => (
-          <View key={item.id} style={styles.row}>
+          <View key={item.fishing_log_id} style={styles.row}>
             {/* Cột STT */}
-            <Text style={styles.sttCell}>{item.stt}</Text>
+            <Text style={styles.sttCell}>Mẻ {index + 1}</Text>
 
             {/* Cột Trạng thái */}
             <View style={[styles.cell, styles.statusContainer]}>
               <View style={styles.statusDot} />
-              <TouchableOpacity onPress={() => handleStatusPress(item.id)}>
+              <TouchableOpacity
-                <Text style={styles.statusText}>{item.trangThai}</Text>
+                onPress={() => handleStatusPress(item.fishing_log_id)}
+              >
+                <Text style={styles.statusText}>
+                  {item.status ? "Đã hoàn thành" : "Chưa hoàn thành"}
+                </Text>
               </TouchableOpacity>
             </View>
           </View>
@@ -265,16 +101,20 @@ const NetListTable: React.FC = () => {
         </View>
 
         {/* Body */}
-        {data.map((item) => (
+        {data.map((item, index) => (
-          <View key={item.id} style={styles.row}>
+          <View key={item.fishing_log_id} style={styles.row}>
             {/* Cột STT */}
-            <Text style={styles.sttCell}>{item.stt}</Text>
+            <Text style={styles.sttCell}>Mẻ {index + 1}</Text>
 
             {/* Cột Trạng thái */}
             <View style={[styles.cell, styles.statusContainer]}>
               <View style={styles.statusDot} />
-              <TouchableOpacity onPress={() => handleStatusPress(item.id)}>
+              <TouchableOpacity
-                <Text style={styles.statusText}>{item.trangThai}</Text>
+                onPress={() => handleStatusPress(item.fishing_log_id)}
+              >
+                <Text style={styles.statusText}>
+                  {item.status ? "Đã hoàn thành" : "Chưa hoàn thành"}
+                </Text>
               </TouchableOpacity>
             </View>
           </View>
@@ -289,6 +129,13 @@ 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/TripCostTable.tsx

@@ -1,6 +1,6 @@
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { useTrip } from "@/state/use-trip";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { Animated, Text, TouchableOpacity, View } from "react-native";
 import TripCostDetailModal from "./modal/TripCostDetailModal";
 import styles from "./style/TripCostTable.styles";
@@ -20,12 +20,6 @@ const TripCostTable: React.FC = () => {
   const data: Model.TripCost[] = trip?.trip_cost ?? [];
   const tongCong = data.reduce((sum, item) => sum + item.total_cost, 0);
 
-  // Reset animated height khi dữ liệu thay đổi
-  useEffect(() => {
-    setContentHeight(0); // Reset để tính lại chiều cao
-    setCollapsed(true); // Reset về trạng thái gập lại
-  }, [data]);
-
   const handleToggle = () => {
     const toValue = collapsed ? contentHeight : 0;
     Animated.timing(animatedHeight, {

components/tripInfo/modal/NetDetailModal/NetDetailModal.tsx

@@ -14,38 +14,11 @@ import { FishCardList } from "./components/FishCardList";
 import { InfoSection } from "./components/InfoSection";
 import { NotesSection } from "./components/NotesSection";
 
-// ---------------------------
-// 🧩 Interface
-// ---------------------------
-interface FishCatch {
-  fish_species_id: number;
-  fish_name: string;
-  catch_number: number;
-  catch_unit: string;
-  fish_size: number;
-  fish_rarity: number;
-  fish_condition: string;
-  gear_usage: string;
-}
-
-interface NetDetail {
-  id: string;
-  stt: string;
-  trangThai: string;
-  thoiGianBatDau?: string;
-  thoiGianKetThuc?: string;
-  viTriHaThu?: string;
-  viTriThuLuoi?: string;
-  doSauHaThu?: string;
-  doSauThuLuoi?: string;
-  catchList?: FishCatch[];
-  ghiChu?: string;
-}
-
 interface NetDetailModalProps {
   visible: boolean;
   onClose: () => void;
-  netData: NetDetail | null;
+  netData: Model.FishingLog | null;
+  stt?: number;
 }
 
 // ---------------------------
@@ -55,9 +28,12 @@ const NetDetailModal: React.FC<NetDetailModalProps> = ({
   visible,
   onClose,
   netData,
+  stt,
 }) => {
   const [isEditing, setIsEditing] = useState(false);
-  const [editableCatchList, setEditableCatchList] = useState<FishCatch[]>([]);
+  const [editableCatchList, setEditableCatchList] = useState<
+    Model.FishingLogInfo[]
+  >([]);
   const [selectedFishIndex, setSelectedFishIndex] = useState<number | null>(
     null
   );
@@ -74,8 +50,8 @@ const NetDetailModal: React.FC<NetDetailModalProps> = ({
 
   // Khởi tạo dữ liệu khi netData thay đổi
   React.useEffect(() => {
-    if (netData?.catchList) {
+    if (netData?.info) {
-      setEditableCatchList(netData.catchList);
+      setEditableCatchList(netData.info);
     }
   }, [netData]);
 
@@ -93,7 +69,7 @@ const NetDetailModal: React.FC<NetDetailModalProps> = ({
 
   // if (!netData) return null;
 
-  const isCompleted = netData?.trangThai === "Đã hoàn thành";
+  const isCompleted = netData?.status === 2; // ví dụ: status=2 là hoàn thành
 
   // Danh sách tên cá có sẵn
   const fishNameOptions = [
@@ -210,7 +186,7 @@ const NetDetailModal: React.FC<NetDetailModalProps> = ({
 
   const handleCancel = () => {
     setIsEditing(false);
-    setEditableCatchList(netData?.catchList || []);
+    setEditableCatchList(netData?.info || []);
   };
 
   const handleToggleExpanded = (index: number) => {
@@ -221,7 +197,7 @@ const NetDetailModal: React.FC<NetDetailModalProps> = ({
 
   const updateCatchItem = (
     index: number,
-    field: keyof FishCatch,
+    field: keyof Model.FishingLogInfo,
     value: string | number
   ) => {
     setEditableCatchList((prev) =>
@@ -245,7 +221,7 @@ const NetDetailModal: React.FC<NetDetailModalProps> = ({
   };
 
   const handleAddNewFish = () => {
-    const newFish: FishCatch = {
+    const newFish: Model.FishingLogInfo = {
       fish_species_id: 0,
       fish_name: "",
       catch_number: 0,
@@ -289,7 +265,8 @@ const NetDetailModal: React.FC<NetDetailModalProps> = ({
 
   // Chỉ tính tổng số lượng cá có đơn vị là 'kg'
   const totalCatch = editableCatchList.reduce(
-    (sum, item) => (item.catch_unit === "kg" ? sum + item.catch_number : sum),
+    (sum, item) =>
+      item.catch_unit === "kg" ? sum + (item.catch_number ?? 0) : sum,
     0
   );
 
@@ -346,6 +323,7 @@ const NetDetailModal: React.FC<NetDetailModalProps> = ({
           <InfoSection
             netData={netData ?? undefined}
             isCompleted={isCompleted}
+            stt={stt}
           />
 
           {/* Danh sách cá bắt được */}
@@ -375,7 +353,7 @@ const NetDetailModal: React.FC<NetDetailModalProps> = ({
           />
 
           {/* Ghi chú */}
-          <NotesSection ghiChu={netData?.ghiChu} />
+          <NotesSection ghiChu={netData?.weather_description} />
         </ScrollView>
       </View>
     </Modal>

components/tripInfo/modal/NetDetailModal/components/FishCardForm.tsx

@@ -1,25 +1,15 @@
+import { useFishes } from "@/state/use-fish";
 import React from "react";
 import { Text, TextInput, View } from "react-native";
 import styles from "../../style/NetDetailModal.styles";
 import { FishSelectDropdown } from "./FishSelectDropdown";
 
-interface FishCatch {
-  fish_species_id: number;
-  fish_name: string;
-  catch_number: number;
-  catch_unit: string;
-  fish_size: number;
-  fish_rarity: number;
-  fish_condition: string;
-  gear_usage: string;
-}
-
 interface FishCardFormProps {
-  fish: FishCatch;
+  fish: Model.FishingLogInfo;
   index: number;
   isEditing: boolean;
-  fishNameOptions: string[];
+  fishNameOptions: string[]; // Bỏ gọi API cá
-  unitOptions: string[];
+  unitOptions: string[]; // Bỏ render ở trong này
   // conditionOptions: string[];
   // gearOptions: string[];
   selectedFishIndex: number | null;
@@ -32,7 +22,7 @@ interface FishCardFormProps {
   // setSelectedGearIndex: (index: number | null) => void;
   onUpdateCatchItem: (
     index: number,
-    field: keyof FishCatch,
+    field: keyof Model.FishingLogInfo,
     value: string | number
   ) => void;
 }
@@ -41,7 +31,6 @@ export const FishCardForm: React.FC<FishCardFormProps> = ({
   fish,
   index,
   isEditing,
-  fishNameOptions,
   unitOptions,
   // conditionOptions,
   // gearOptions,
@@ -55,6 +44,8 @@ export const FishCardForm: React.FC<FishCardFormProps> = ({
   // setSelectedGearIndex,
   onUpdateCatchItem,
 }) => {
+  const { fishSpecies } = useFishes();
+
   return (
     <>
       {/* Tên cá - Select */}
@@ -64,15 +55,16 @@ export const FishCardForm: React.FC<FishCardFormProps> = ({
         <Text style={styles.label}>Tên cá</Text>
         {isEditing ? (
           <FishSelectDropdown
-            options={fishNameOptions}
+            options={fishSpecies || []}
-            selectedValue={fish.fish_name}
+            selectedFishId={selectedFishIndex}
             isOpen={selectedFishIndex === index}
             onToggle={() =>
               setSelectedFishIndex(selectedFishIndex === index ? null : index)
             }
-            onSelect={(value: string) => {
+            onSelect={(value: Model.FishSpeciesResponse) => {
-              onUpdateCatchItem(index, "fish_name", value);
+              onUpdateCatchItem(index, "fish_name", value.name);
-              setSelectedFishIndex(null);
+              setSelectedFishIndex(value.id);
+              console.log("Fish Selected: ", fish);
             }}
             zIndex={1000 - index}
             styleOverride={styles.fishNameDropdown}
@@ -107,10 +99,10 @@ export const FishCardForm: React.FC<FishCardFormProps> = ({
           ]}
         >
           <Text style={styles.label}>Đơn vị</Text>
-          {isEditing ? (
+          {/* {isEditing ? (
             <FishSelectDropdown
               options={unitOptions}
-              selectedValue={fish.catch_unit}
+              selectedValue={fish.catch_unit ?? ""}
               isOpen={selectedUnitIndex === index}
               onToggle={() =>
                 setSelectedUnitIndex(selectedUnitIndex === index ? null : index)
@@ -123,7 +115,7 @@ export const FishCardForm: React.FC<FishCardFormProps> = ({
             />
           ) : (
             <Text style={styles.infoValue}>{fish.catch_unit}</Text>
-          )}
+          )} */}
         </View>
       </View>
 

components/tripInfo/modal/NetDetailModal/components/FishCardHeader.tsx

@@ -2,19 +2,8 @@ import React from "react";
 import { Text, View } from "react-native";
 import styles from "../../style/NetDetailModal.styles";
 
-interface FishCatch {
-  fish_species_id: number;
-  fish_name: string;
-  catch_number: number;
-  catch_unit: string;
-  fish_size: number;
-  fish_rarity: number;
-  fish_condition: string;
-  gear_usage: string;
-}
-
 interface FishCardHeaderProps {
-  fish: FishCatch;
+  fish: Model.FishingLogInfo;
 }
 
 export const FishCardHeader: React.FC<FishCardHeaderProps> = ({ fish }) => {

components/tripInfo/modal/NetDetailModal/components/FishCardList.tsx

@@ -5,19 +5,8 @@ import styles from "../../style/NetDetailModal.styles";
 import { FishCardForm } from "./FishCardForm";
 import { FishCardHeader } from "./FishCardHeader";
 
-interface FishCatch {
-  fish_species_id: number;
-  fish_name: string;
-  catch_number: number;
-  catch_unit: string;
-  fish_size: number;
-  fish_rarity: number;
-  fish_condition: string;
-  gear_usage: string;
-}
-
 interface FishCardListProps {
-  catchList: FishCatch[];
+  catchList: Model.FishingLogInfo[];
   isEditing: boolean;
   expandedFishIndex: number[];
   selectedFishIndex: number | null;
@@ -31,7 +20,7 @@ interface FishCardListProps {
   onToggleExpanded: (index: number) => void;
   onUpdateCatchItem: (
     index: number,
-    field: keyof FishCatch,
+    field: keyof Model.FishingLogInfo,
     value: string | number
   ) => void;
   setSelectedFishIndex: (index: number | null) => void;

components/tripInfo/modal/NetDetailModal/components/FishSelectDropdown.tsx

@@ -4,18 +4,18 @@ import { ScrollView, Text, TouchableOpacity, View } from "react-native";
 import styles from "../../style/NetDetailModal.styles";
 
 interface FishSelectDropdownProps {
-  options: string[];
+  options: Model.FishSpeciesResponse[];
-  selectedValue: string;
+  selectedFishId: number | null;
   isOpen: boolean;
   onToggle: () => void;
-  onSelect: (value: string) => void;
+  onSelect: (value: Model.FishSpeciesResponse) => void;
   zIndex: number;
   styleOverride?: any;
 }
 
 export const FishSelectDropdown: React.FC<FishSelectDropdownProps> = ({
   options,
-  selectedValue,
+  selectedFishId,
   isOpen,
   onToggle,
   onSelect,
@@ -23,11 +23,18 @@ export const FishSelectDropdown: React.FC<FishSelectDropdownProps> = ({
   styleOverride,
 }) => {
   const dropdownStyle = styleOverride || styles.optionsList;
-
+  const findFishNameById = (id: number | null) => {
+    const fish = options.find((item) => item.id === id);
+    return fish?.name || "Chọn cá";
+  };
+  const [selectedFish, setSelectedFish] =
+    React.useState<Model.FishSpeciesResponse | null>(null);
   return (
     <View style={{ zIndex }}>
       <TouchableOpacity style={styles.selectButton} onPress={onToggle}>
-        <Text style={styles.selectButtonText}>{selectedValue}</Text>
+        <Text style={styles.selectButtonText}>
+          {findFishNameById(selectedFishId)}
+        </Text>
         <IconSymbol
           name={isOpen ? "chevron.up" : "chevron.down"}
           size={16}
@@ -38,11 +45,13 @@ export const FishSelectDropdown: React.FC<FishSelectDropdownProps> = ({
         <ScrollView style={dropdownStyle} nestedScrollEnabled={true}>
           {options.map((option, optIndex) => (
             <TouchableOpacity
-              key={optIndex}
+              key={option.id || optIndex}
               style={styles.optionItem}
               onPress={() => onSelect(option)}
             >
-              <Text style={styles.optionText}>{option}</Text>
+              <Text style={styles.optionText}>
+                {findFishNameById(option.id)}
+              </Text>
             </TouchableOpacity>
           ))}
         </ScrollView>

components/tripInfo/modal/NetDetailModal/components/InfoSection.tsx

@@ -17,31 +17,37 @@ interface NetDetail {
 }
 
 interface InfoSectionProps {
-  netData?: NetDetail;
+  netData?: Model.FishingLog;
   isCompleted: boolean;
+  stt?: number;
 }
 
 export const InfoSection: React.FC<InfoSectionProps> = ({
   netData,
   isCompleted,
+  stt,
 }) => {
   if (!netData) {
     return null;
   }
   const infoItems = [
-    { label: "Số thứ tự", value: netData.stt },
+    { label: "Số thứ tự", value: `Mẻ ${stt}` },
     {
       label: "Trạng thái",
-      value: netData.trangThai,
+      value: netData.status === 1 ? "Đã hoàn thành" : "Chưa hoàn thành",
       isStatus: true,
     },
     {
       label: "Thời gian bắt đầu",
-      value: netData.thoiGianBatDau || "Chưa cập nhật",
+      value: netData.start_at
+        ? new Date(netData.start_at).toLocaleString()
+        : "Chưa cập nhật",
     },
     {
       label: "Thời gian kết thúc",
-      value: netData.thoiGianKetThuc || "Chưa cập nhật",
+      value: netData.start_at
+        ? new Date(netData.end_at).toLocaleString()
+        : "Chưa cập nhật",
     },
     {
       label: "Vị trí hạ thu",
@@ -70,7 +76,7 @@ export const InfoSection: React.FC<InfoSectionProps> = ({
             <View
               style={[
                 styles.statusBadge,
-                isCompleted
+                item.value === "Đã hoàn thành"
                   ? styles.statusBadgeCompleted
                   : styles.statusBadgeInProgress,
               ]}
@@ -78,7 +84,7 @@ export const InfoSection: React.FC<InfoSectionProps> = ({
               <Text
                 style={[
                   styles.statusBadgeText,
-                  isCompleted
+                  item.value === "Đã hoàn thành"
                     ? styles.statusBadgeTextCompleted
                     : styles.statusBadgeTextInProgress,
                 ]}

controller/FishController.ts

@@ -0,0 +1,6 @@
+import { api } from "@/config";
+import { API_GET_FISH } from "@/constants";
+
+export async function queryFish() {
+  return api.get<Model.FishSpeciesResponse[]>(API_GET_FISH);
+}

controller/typings.d.ts

@@ -186,4 +186,27 @@ declare namespace Model {
     status: number;
     note?: string;
   }
+  //Fish
+  interface FishSpeciesResponse {
+    id: number;
+    name: string;
+    scientific_name: string;
+    group_name: string;
+    species_code: string;
+    note: string;
+    default_unit: string;
+    rarity_level: number;
+    created_at: string;
+    updated_at: string;
+    is_deleted: boolean;
+  }
+  interface FishRarity {
+    id: number;
+    code: string;
+    label: string;
+    description: string;
+    iucn_code: any;
+    cites_appendix: any;
+    vn_law: boolean;
+  }
 }

state/use-fish.ts

@@ -0,0 +1,26 @@
+import { queryFish } from "@/controller/FishController";
+import { create } from "zustand";
+
+type Fish = {
+  fishSpecies: Model.FishSpeciesResponse[] | null;
+  getFishSpecies: () => Promise<void>;
+  error: string | null;
+  loading?: boolean;
+};
+
+export const useFishes = create<Fish>((set) => ({
+  fishSpecies: null,
+  getFishSpecies: async () => {
+    try {
+      const response = await queryFish();
+      console.log("Fish fetching API: ", response.data.length);
+
+      set({ fishSpecies: response.data, loading: false });
+    } catch (error) {
+      console.error("Error when fetch fish: ", error);
+      set({ error: "Failed to fetch fish data", loading: false });
+      set({ fishSpecies: null });
+    }
+  },
+  error: null,
+}));