fill data API CrewList, FishingTools, TripCost

components/tripInfo/TripCostTable.tsx

@@ -1,60 +1,10 @@
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { useTrip } from "@/state/use-trip";
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Animated, Text, TouchableOpacity, View } from "react-native";
 import TripCostDetailModal from "./modal/TripCostDetailModal";
 import styles from "./style/TripCostTable.styles";
 
-// ---------------------------
-// 🧩 Interface
-// ---------------------------
-interface CostItem {
-  id: string;
-  loai: string;
-  soLuong: number;
-  donVi: string;
-  chiPhi: number;
-  tongChiPhi: number;
-}
-
-// ---------------------------
-// 📊 Dữ liệu mẫu
-// ---------------------------
-const data: CostItem[] = [
-  {
-    id: "1",
-    loai: "Nhiên liệu",
-    soLuong: 1000,
-    donVi: "liters",
-    chiPhi: 20000,
-    tongChiPhi: 20000000,
-  },
-  {
-    id: "2",
-    loai: "Lương thực",
-    soLuong: 500,
-    donVi: "kg",
-    chiPhi: 30000,
-    tongChiPhi: 15000000,
-  },
-  {
-    id: "3",
-    loai: "Lương thuyền viên",
-    soLuong: 10,
-    donVi: "people",
-    chiPhi: 5000000,
-    tongChiPhi: 50000000,
-  },
-  {
-    id: "4",
-    loai: "Muối đá",
-    soLuong: 100,
-    donVi: "kg",
-    chiPhi: 20000,
-    tongChiPhi: 2000000,
-  },
-];
-
 // ---------------------------
 // 💰 Component chính
 // ---------------------------
@@ -64,8 +14,17 @@ const TripCostTable: React.FC = () => {
   const [contentHeight, setContentHeight] = useState<number>(0);
   const [modalVisible, setModalVisible] = useState(false);
   const animatedHeight = useRef(new Animated.Value(0)).current;
-  const tongCong = data.reduce((sum, item) => sum + item.tongChiPhi, 0);
-  const { trip, getTrip } = useTrip();
+
+  const { trip } = useTrip();
+
+  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;
@@ -97,8 +56,6 @@ const TripCostTable: React.FC = () => {
           //   marginBottom: 12,
         }}
       >
-        {/* {trip && <Text></Text>} */}
-
         <Text style={styles.title}>Chi phí chuyến đi</Text>
         {collapsed && (
           <Text
@@ -136,11 +93,11 @@ const TripCostTable: React.FC = () => {
         </View>
 
         {/* Body */}
-        {data.map((item) => (
-          <View key={item.id} style={styles.row}>
-            <Text style={[styles.cell, styles.left]}>{item.loai}</Text>
+        {data.map((item, index) => (
+          <View key={index} style={styles.row}>
+            <Text style={[styles.cell, styles.left]}>{item.type}</Text>
             <Text style={[styles.cell, styles.right]}>
-              {item.tongChiPhi.toLocaleString()}
+              {item.total_cost.toLocaleString()}
             </Text>
           </View>
         ))}
@@ -156,12 +113,14 @@ const TripCostTable: React.FC = () => {
         </View>
 
         {/* View Detail Button */}
-        <TouchableOpacity
-          style={styles.viewDetailButton}
-          onPress={handleViewDetail}
-        >
-          <Text style={styles.viewDetailText}>Xem chi tiết</Text>
-        </TouchableOpacity>
+        {data.length > 0 && (
+          <TouchableOpacity
+            style={styles.viewDetailButton}
+            onPress={handleViewDetail}
+          >
+            <Text style={styles.viewDetailText}>Xem chi tiết</Text>
+          </TouchableOpacity>
+        )}
       </View>
 
       <Animated.View style={{ height: animatedHeight, overflow: "hidden" }}>
@@ -174,11 +133,11 @@ const TripCostTable: React.FC = () => {
         </View>
 
         {/* Body */}
-        {data.map((item) => (
-          <View key={item.id} style={styles.row}>
-            <Text style={[styles.cell, styles.left]}>{item.loai}</Text>
+        {data.map((item, index) => (
+          <View key={index} style={styles.row}>
+            <Text style={[styles.cell, styles.left]}>{item.type}</Text>
             <Text style={[styles.cell, styles.right]}>
-              {item.tongChiPhi.toLocaleString()}
+              {item.total_cost.toLocaleString()}
             </Text>
           </View>
         ))}
@@ -194,12 +153,14 @@ const TripCostTable: React.FC = () => {
         </View>
 
         {/* View Detail Button */}
-        <TouchableOpacity
-          style={styles.viewDetailButton}
-          onPress={handleViewDetail}
-        >
-          <Text style={styles.viewDetailText}>Xem chi tiết</Text>
-        </TouchableOpacity>
+        {data.length > 0 && (
+          <TouchableOpacity
+            style={styles.viewDetailButton}
+            onPress={handleViewDetail}
+          >
+            <Text style={styles.viewDetailText}>Xem chi tiết</Text>
+          </TouchableOpacity>
+        )}
       </Animated.View>
 
       {/* Modal */}