fill data API NetDetail

components/tripInfo/NetListTable.tsx

@@ -1,191 +1,18 @@
 import { IconSymbol } from "@/components/ui/icon-symbol";
+import { useTrip } from "@/state/use-trip";
 import React, { 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 data: Model.FishingLog[] = trip?.fishing_logs ?? [];
   const tongSoMe = data.length;
 
   const handleToggle = () => {
@@ -199,7 +26,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 +67,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 +96,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 +124,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/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

@@ -3,19 +3,8 @@ 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[];
@@ -32,7 +21,7 @@ interface FishCardFormProps {
   // setSelectedGearIndex: (index: number | null) => void;
   onUpdateCatchItem: (
     index: number,
-    field: keyof FishCatch,
+    field: keyof Model.FishingLogInfo,
     value: string | number
   ) => void;
 }
@@ -65,7 +54,7 @@ export const FishCardForm: React.FC<FishCardFormProps> = ({
         {isEditing ? (
           <FishSelectDropdown
             options={fishNameOptions}
-            selectedValue={fish.fish_name}
+            selectedValue={fish.fish_name ?? ""}
             isOpen={selectedFishIndex === index}
             onToggle={() =>
               setSelectedFishIndex(selectedFishIndex === index ? null : index)
@@ -110,7 +99,7 @@ export const FishCardForm: React.FC<FishCardFormProps> = ({
           {isEditing ? (
             <FishSelectDropdown
               options={unitOptions}
-              selectedValue={fish.catch_unit}
+              selectedValue={fish.catch_unit ?? ""}
               isOpen={selectedUnitIndex === index}
               onToggle={() =>
                 setSelectedUnitIndex(selectedUnitIndex === index ? null : index)

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/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,
                 ]}