update tripCostTable, FishingToolsList, CrewListTable in tripInfo

components/tripInfo/TripCostTable.tsx

@@ -2,8 +2,6 @@ import { IconSymbol } from "@/components/ui/icon-symbol";
 import React, { useRef, useState } from "react";
 import {
   Animated,
-  FlatList,
-  ListRenderItem,
   Platform,
   Text,
   TouchableOpacity,
@@ -76,33 +74,17 @@ const TripCostTable: React.FC = () => {
   }
 
   const [collapsed, setCollapsed] = useState(true);
+  const [contentHeight, setContentHeight] = useState<number>(0);
   const animatedHeight = useRef(new Animated.Value(0)).current;
   const tongCong = data.reduce((sum, item) => sum + item.tongChiPhi, 0);
 
-  const renderItem: ListRenderItem<CostItem> = ({ item }) => (
-    <View style={styles.row}>
-      <Text style={[styles.cell, styles.left]}>{item.loai}</Text>
-      <Text style={[styles.cell, styles.highlight]}>
-        {item.tongChiPhi.toLocaleString()}
-      </Text>
-    </View>
-  );
-
-  const contentHeight = 220; // Chiều cao cố định cho bảng, có thể điều chỉnh
   const handleToggle = () => {
-    if (collapsed) {
-      Animated.timing(animatedHeight, {
-        toValue: contentHeight,
-        duration: 350,
-        useNativeDriver: false,
-      }).start();
-    } else {
-      Animated.timing(animatedHeight, {
-        toValue: 0,
-        duration: 350,
-        useNativeDriver: false,
-      }).start();
-    }
+    const toValue = collapsed ? contentHeight : 0;
+    Animated.timing(animatedHeight, {
+      toValue,
+      duration: 300,
+      useNativeDriver: false,
+    }).start();
     setCollapsed((prev) => !prev);
   };
 
@@ -115,7 +97,7 @@ const TripCostTable: React.FC = () => {
           flexDirection: "row",
           justifyContent: "space-between",
           alignItems: "center",
-          marginBottom: collapsed ? 0 : 12,
+          //   marginBottom: 12,
         }}
       >
         <Text style={styles.title}>Chi phí chuyến đi</Text>
@@ -136,6 +118,45 @@ const TripCostTable: React.FC = () => {
         />
       </TouchableOpacity>
 
+      {/* Nội dung ẩn để đo chiều cao */}
+      <View
+        style={{ position: "absolute", opacity: 0, zIndex: -1000 }}
+        onLayout={(event) => {
+          const height = event.nativeEvent.layout.height;
+          if (height > 0 && contentHeight === 0) {
+            setContentHeight(height);
+          }
+        }}
+      >
+        {/* Header */}
+        <View style={[styles.row, styles.header]}>
+          <Text style={[styles.cell, styles.left, styles.headerText]}>
+            Loại
+          </Text>
+          <Text style={[styles.cell, styles.headerText]}>Tổng chi phí</Text>
+        </View>
+
+        {/* Body */}
+        {data.map((item) => (
+          <View key={item.id} style={styles.row}>
+            <Text style={[styles.cell, styles.left]}>{item.loai}</Text>
+            <Text style={[styles.cell, styles.right]}>
+              {item.tongChiPhi.toLocaleString()}
+            </Text>
+          </View>
+        ))}
+
+        {/* Footer */}
+        <View style={[styles.row]}>
+          <Text style={[styles.cell, styles.left, styles.footerText]}>
+            Tổng cộng
+          </Text>
+          <Text style={[styles.cell, styles.total]}>
+            {tongCong.toLocaleString()}
+          </Text>
+        </View>
+      </View>
+
       <Animated.View style={{ height: animatedHeight, overflow: "hidden" }}>
         {/* Header */}
         <View style={[styles.row, styles.header]}>
@@ -146,11 +167,14 @@ const TripCostTable: React.FC = () => {
         </View>
 
         {/* Body */}
-        <FlatList
-          data={data}
-          renderItem={renderItem}
-          keyExtractor={(item) => item.id}
-        />
+        {data.map((item) => (
+          <View key={item.id} style={styles.row}>
+            <Text style={[styles.cell, styles.left]}>{item.loai}</Text>
+            <Text style={[styles.cell, styles.right]}>
+              {item.tongChiPhi.toLocaleString()}
+            </Text>
+          </View>
+        ))}
 
         {/* Footer */}
         <View style={[styles.row]}>