tadd select component

update netDetail
Update from MinhNN
2025-11-07 15:28:55 +07:00 · 2025-11-07 11:54:16 +07:00 · 2025-11-06 23:59:56 +07:00 · 2025-11-06 23:38:53 +07:00 · 2025-11-06 17:59:40 +07:00
17 changed files with 462 additions and 473 deletions
--- a/app/(tabs)/sensor.tsx
+++ b/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>
--- a/app/auth/login.tsx
+++ b/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(
-        "Lỗi",
+      showErrorToast(
        error instanceof Error ? error.message : "Đăng nhập thất bại"
      );
    } finally {
--- a/components/ButtonCreateNewHaulOrTrip.tsx
+++ b/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,
--- a/components/Select.tsx
+++ b/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;
--- a/components/tripInfo/CrewListTable.tsx
+++ b/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, {
--- a/components/tripInfo/FishingToolsList.tsx
+++ b/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, {
--- a/components/tripInfo/NetListTable.tsx
+++ b/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) => (
-          <View key={item.id} style={styles.row}>
+        {data.map((item, index) => (
+          <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)}>
-                <Text style={styles.statusText}>{item.trangThai}</Text>
+              <TouchableOpacity
+                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) => (
-          <View key={item.id} style={styles.row}>
+        {data.map((item, index) => (
+          <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)}>
-                <Text style={styles.statusText}>{item.trangThai}</Text>
+              <TouchableOpacity
+                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>
  );
--- a/components/tripInfo/TripCostTable.tsx
+++ b/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, {
--- a/components/tripInfo/modal/NetDetailModal/NetDetailModal.tsx
+++ b/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) {
-      setEditableCatchList(netData.catchList);
+    if (netData?.info) {
+      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>
--- a/components/tripInfo/modal/NetDetailModal/components/FishCardForm.tsx
+++ b/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[];
-  unitOptions: string[];
+  fishNameOptions: string[]; // Bỏ gọi API cá
+  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}
-            selectedValue={fish.fish_name}
+            options={fishSpecies || []}
+            selectedFishId={selectedFishIndex}
            isOpen={selectedFishIndex === index}
            onToggle={() =>
              setSelectedFishIndex(selectedFishIndex === index ? null : index)
            }
-            onSelect={(value: string) => {
-              onUpdateCatchItem(index, "fish_name", value);
-              setSelectedFishIndex(null);
+            onSelect={(value: Model.FishSpeciesResponse) => {
+              onUpdateCatchItem(index, "fish_name", value.name);
+              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>

--- a/components/tripInfo/modal/NetDetailModal/components/FishCardHeader.tsx
+++ b/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 }) => {
--- a/components/tripInfo/modal/NetDetailModal/components/FishCardList.tsx
+++ b/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;
--- a/components/tripInfo/modal/NetDetailModal/components/FishSelectDropdown.tsx
+++ b/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[];
-  selectedValue: string;
+  options: Model.FishSpeciesResponse[];
+  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>
--- a/components/tripInfo/modal/NetDetailModal/components/InfoSection.tsx
+++ b/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,
                ]}
--- a/controller/FishController.ts
+++ b/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);
+}
--- a/controller/typings.d.ts
+++ b/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;
+  }
 }
--- a/state/use-fish.ts
+++ b/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,
+}));
Author	SHA1	Message	Date
Tran Anh Tuan	f7b05f1e08	tadd select component	2025-11-07 15:28:55 +07:00
MinhNN	25b9e831d1	update netDetail	2025-11-07 11:54:16 +07:00
MinhNN	b9cd637b33	Update from MinhNN	2025-11-06 23:59:56 +07:00
MinhNN	b97e4e1097	fill data API NetDetail	2025-11-06 23:38:53 +07:00
MinhNN	04ca091f49	fix open table	2025-11-06 17:59:40 +07:00