update tripCostTable, FishingToolsList, CrewListTable in tripInfo

app/(tabs)/tripInfo.tsx

@@ -1,22 +1,31 @@
 import { ThemedText } from "@/components/themed-text";
+import CrewListTable from "@/components/tripInfo/CrewListTable";
+import FishingToolsTable from "@/components/tripInfo/FishingToolsList";
 import TripCostTable from "@/components/tripInfo/TripCostTable";
-import { StyleSheet, View } from "react-native";
+import { ScrollView, StyleSheet, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 
 export default function TripInfoScreen() {
   return (
-    <SafeAreaView>
+    <SafeAreaView style={{ flex: 1 }}>
-      <View style={styles.container}>
+      <ScrollView contentContainerStyle={styles.scrollContent}>
-        <ThemedText type="title">Thông Tin Chuyến Đi</ThemedText>
+        <View style={styles.container}>
-        <TripCostTable />
+          <ThemedText type="title">Thông Tin Chuyến Đi</ThemedText>
-      </View>
+          <TripCostTable />
+          <FishingToolsTable />
+          <CrewListTable />
+        </View>
+      </ScrollView>
     </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
+  scrollContent: {
+    flexGrow: 1,
+  },
   container: {
     alignItems: "center",
-    padding: 20,
+    padding: 15,
   },
 });

components/tripInfo/CrewListTable.tsx

@@ -0,0 +1,154 @@
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import React, { useRef, useState } from "react";
+import {
+  Animated,
+  Platform,
+  Text,
+  TouchableOpacity,
+  UIManager,
+  View,
+} from "react-native";
+import styles from "./style/CrewListTable.styles";
+
+// ---------------------------
+// 🧩 Interface
+// ---------------------------
+interface CrewMember {
+  id: string;
+  maDinhDanh: string;
+  ten: string;
+  chucVu: string;
+}
+
+// ---------------------------
+// ⚓ Dữ liệu mẫu
+// ---------------------------
+const data: CrewMember[] = [
+  {
+    id: "1",
+    maDinhDanh: "TV001",
+    ten: "Nguyễn Văn A",
+    chucVu: "Thuyền trưởng",
+  },
+  { id: "2", maDinhDanh: "TV002", ten: "Trần Văn B", chucVu: "Máy trưởng" },
+  { id: "3", maDinhDanh: "TV003", ten: "Lê Văn C", chucVu: "Thủy thủ" },
+];
+
+const CrewListTable: React.FC = () => {
+  if (
+    Platform.OS === "android" &&
+    UIManager.setLayoutAnimationEnabledExperimental
+  ) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+  }
+
+  const [collapsed, setCollapsed] = useState(true);
+  const [contentHeight, setContentHeight] = useState<number>(0);
+  const animatedHeight = useRef(new Animated.Value(0)).current;
+  const tongThanhVien = data.length;
+
+  const handleToggle = () => {
+    const toValue = collapsed ? contentHeight : 0;
+    Animated.timing(animatedHeight, {
+      toValue,
+      duration: 300,
+      useNativeDriver: false,
+    }).start();
+    setCollapsed((prev) => !prev);
+  };
+
+  return (
+    <View style={styles.container}>
+      {/* Header toggle */}
+      <TouchableOpacity
+        activeOpacity={0.7}
+        onPress={handleToggle}
+        style={styles.headerRow}
+      >
+        <Text style={styles.title}>Danh sách thuyền viên</Text>
+        {collapsed && (
+          <Text style={styles.totalCollapsed}>{tongThanhVien}</Text>
+        )}
+        <IconSymbol
+          name={collapsed ? "arrowshape.down.fill" : "arrowshape.up.fill"}
+          size={16}
+          color="#000"
+        />
+      </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.tableHeader]}>
+          <Text style={[styles.cell, styles.left, styles.headerText]}>
+            Mã định danh
+          </Text>
+          <Text style={[styles.cell, styles.headerText]}>Tên</Text>
+          <Text style={[styles.cell, styles.right, styles.headerText]}>
+            Chức vụ
+          </Text>
+        </View>
+
+        {/* Body */}
+        {data.map((item) => (
+          <View key={item.id} style={styles.row}>
+            <Text style={[styles.cell, styles.left]}>{item.maDinhDanh}</Text>
+            <Text style={[styles.cell]}>{item.ten}</Text>
+            <Text style={[styles.cell, styles.right]}>{item.chucVu}</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.footerTotal]}>{tongThanhVien}</Text>
+          <Text style={[styles.cell, styles.right]}></Text>
+        </View>
+      </View>
+
+      {/* Bảng hiển thị với animation */}
+      <Animated.View style={{ height: animatedHeight, overflow: "hidden" }}>
+        {/* Header */}
+        <View style={[styles.row, styles.tableHeader]}>
+          <Text style={[styles.cell, styles.left, styles.headerText]}>
+            Mã định danh
+          </Text>
+          <Text style={[styles.cell, styles.headerText]}>Tên</Text>
+          <Text style={[styles.cell, styles.right, styles.headerText]}>
+            Chức vụ
+          </Text>
+        </View>
+
+        {/* Body */}
+        {data.map((item) => (
+          <View key={item.id} style={styles.row}>
+            <Text style={[styles.cell, styles.left]}>{item.maDinhDanh}</Text>
+            <Text style={[styles.cell]}>{item.ten}</Text>
+            <Text style={[styles.cell, styles.right]}>{item.chucVu}</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.footerTotal]}>{tongThanhVien}</Text>
+          <Text style={[styles.cell, styles.right]}></Text>
+        </View>
+      </Animated.View>
+    </View>
+  );
+};
+
+export default CrewListTable;

components/tripInfo/FishingToolsList.tsx

@@ -0,0 +1,141 @@
+import { IconSymbol } from "@/components/ui/icon-symbol"; // biểu tượng giống dự án bạn
+import React, { useRef, useState } from "react";
+import {
+  Animated,
+  Platform,
+  Text,
+  TouchableOpacity,
+  UIManager,
+  View,
+} from "react-native";
+import styles from "./style/FishingToolsTable.styles";
+
+// ---------------------------
+// 🧩 Interface
+// ---------------------------
+interface ToolItem {
+  id: string;
+  ten: string;
+  soLuong: number;
+}
+
+// ---------------------------
+// 🎣 Dữ liệu mẫu
+// ---------------------------
+const data: ToolItem[] = [
+  { id: "1", ten: "Lưới kéo", soLuong: 1 },
+  { id: "2", ten: "Cần câu", soLuong: 1 },
+  { id: "3", ten: "Mồi câu", soLuong: 5 },
+];
+
+const FishingToolsTable: React.FC = () => {
+  // Bật animation trên Android
+  if (
+    Platform.OS === "android" &&
+    UIManager.setLayoutAnimationEnabledExperimental
+  ) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+  }
+
+  const [collapsed, setCollapsed] = useState(true);
+  const [contentHeight, setContentHeight] = useState<number>(0);
+  const animatedHeight = useRef(new Animated.Value(0)).current;
+  const tongSoLuong = data.reduce((sum, item) => sum + item.soLuong, 0);
+
+  const handleToggle = () => {
+    const toValue = collapsed ? contentHeight : 0;
+    Animated.timing(animatedHeight, {
+      toValue,
+      duration: 300,
+      useNativeDriver: false,
+    }).start();
+    setCollapsed((prev) => !prev);
+  };
+
+  return (
+    <View style={styles.container}>
+      {/* Header / Toggle */}
+      <TouchableOpacity
+        activeOpacity={0.7}
+        onPress={handleToggle}
+        style={styles.headerRow}
+      >
+        <Text style={styles.title}>Danh sách ngư cụ</Text>
+        {collapsed && <Text style={styles.totalCollapsed}>{tongSoLuong}</Text>}
+        <IconSymbol
+          name={collapsed ? "arrowshape.down.fill" : "arrowshape.up.fill"}
+          size={16}
+          color="#000"
+        />
+      </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);
+          }
+        }}
+      >
+        {/* Table Header */}
+        <View style={[styles.row, styles.tableHeader]}>
+          <Text style={[styles.cell, styles.left, styles.headerText]}>Tên</Text>
+          <Text style={[styles.cell, styles.right, styles.headerText]}>
+            Số lượng
+          </Text>
+        </View>
+
+        {/* Body */}
+        {data.map((item) => (
+          <View key={item.id} style={styles.row}>
+            <Text style={[styles.cell, styles.left]}>{item.ten}</Text>
+            <Text style={[styles.cell, styles.right]}>{item.soLuong}</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.right, styles.footerTotal]}>
+            {tongSoLuong}
+          </Text>
+        </View>
+      </View>
+
+      {/* Nội dung mở/đóng */}
+      <Animated.View style={{ height: animatedHeight, overflow: "hidden" }}>
+        {/* Table Header */}
+        <View style={[styles.row, styles.tableHeader]}>
+          <Text style={[styles.cell, styles.left, styles.headerText]}>Tên</Text>
+          <Text style={[styles.cell, styles.right, styles.headerText]}>
+            Số lượng
+          </Text>
+        </View>
+
+        {/* Body */}
+        {data.map((item) => (
+          <View key={item.id} style={styles.row}>
+            <Text style={[styles.cell, styles.left]}>{item.ten}</Text>
+            <Text style={[styles.cell, styles.right]}>{item.soLuong}</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.right, styles.footerTotal]}>
+            {tongSoLuong}
+          </Text>
+        </View>
+      </Animated.View>
+    </View>
+  );
+};
+
+export default FishingToolsTable;

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) {
+    const toValue = collapsed ? contentHeight : 0;
-      Animated.timing(animatedHeight, {
+    Animated.timing(animatedHeight, {
-        toValue: contentHeight,
+      toValue,
-        duration: 350,
+      duration: 300,
-        useNativeDriver: false,
+      useNativeDriver: false,
-      }).start();
+    }).start();
-    } else {
-      Animated.timing(animatedHeight, {
-        toValue: 0,
-        duration: 350,
-        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.map((item) => (
-          data={data}
+          <View key={item.id} style={styles.row}>
-          renderItem={renderItem}
+            <Text style={[styles.cell, styles.left]}>{item.loai}</Text>
-          keyExtractor={(item) => item.id}
+            <Text style={[styles.cell, styles.right]}>
-        />
+              {item.tongChiPhi.toLocaleString()}
+            </Text>
+          </View>
+        ))}
 
         {/* Footer */}
         <View style={[styles.row]}>

components/tripInfo/style/CrewListTable.styles.ts

@@ -0,0 +1,67 @@
+import { StyleSheet } from "react-native";
+
+export default StyleSheet.create({
+  container: {
+    width: "100%",
+    backgroundColor: "#fff",
+    borderRadius: 12,
+    padding: 16,
+    marginVertical: 10,
+    borderWidth: 1,
+    borderColor: "#fff",
+    shadowColor: "#000",
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  headerRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "600",
+  },
+  totalCollapsed: {
+    color: "#ff6600",
+    fontSize: 18,
+    fontWeight: "700",
+    textAlign: "center",
+  },
+  row: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    paddingVertical: 8,
+    borderBottomWidth: 0.5,
+    borderBottomColor: "#eee",
+  },
+  tableHeader: {
+    backgroundColor: "#fafafa",
+    borderRadius: 6,
+    marginTop: 10,
+  },
+  cell: {
+    flex: 1,
+    fontSize: 15,
+    color: "#111",
+    textAlign: "center",
+  },
+  left: {
+    textAlign: "center",
+  },
+  right: {
+    textAlign: "center",
+  },
+  headerText: {
+    fontWeight: "600",
+  },
+  footerText: {
+    color: "#007bff",
+    fontWeight: "600",
+  },
+  footerTotal: {
+    color: "#ff6600",
+    fontWeight: "800",
+  },
+});

components/tripInfo/style/FishingToolsTable.styles.ts

@@ -0,0 +1,66 @@
+import { StyleSheet } from "react-native";
+
+export default StyleSheet.create({
+  container: {
+    width: "100%",
+    backgroundColor: "#fff",
+    borderRadius: 12,
+    padding: 16,
+    marginVertical: 10,
+    borderWidth: 1,
+    borderColor: "#fff",
+    shadowColor: "#000",
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  headerRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "700",
+  },
+  totalCollapsed: {
+    color: "#ff6600",
+    fontSize: 18,
+    fontWeight: "700",
+    textAlign: "center",
+  },
+  row: {
+    flexDirection: "row",
+    paddingVertical: 8,
+    borderBottomWidth: 0.5,
+    borderBottomColor: "#eee",
+    paddingLeft: 15,
+  },
+  cell: {
+    flex: 1,
+    fontSize: 15,
+    color: "#111",
+  },
+  left: {
+    textAlign: "left",
+  },
+  right: {
+    textAlign: "center",
+  },
+  tableHeader: {
+    backgroundColor: "#fafafa",
+    borderRadius: 6,
+    marginTop: 10,
+  },
+  headerText: {
+    fontWeight: "600",
+  },
+  footerText: {
+    color: "#007bff",
+    fontWeight: "600",
+  },
+  footerTotal: {
+    color: "#ff6600",
+    fontWeight: "800",
+  },
+});

components/tripInfo/style/TripCostTable.styles.ts

@@ -12,14 +12,10 @@ const styles = StyleSheet.create({
     shadowRadius: 4,
     elevation: 2,
   },
-  icon: {
-    fontSize: 10,
-  },
   title: {
     fontSize: 18,
     fontWeight: "700",
     textAlign: "center",
-    // marginBottom: 12,
   },
   row: {
     flexDirection: "row",
@@ -31,23 +27,24 @@ const styles = StyleSheet.create({
   cell: {
     flex: 1,
     textAlign: "center",
-    fontSize: 14,
+    fontSize: 15,
   },
   left: {
     textAlign: "left",
   },
+  right: {
+    color: "#ff6600",
+    fontWeight: "600",
+  },
   header: {
     backgroundColor: "#f8f8f8",
     borderTopWidth: 1,
     borderBottomWidth: 1,
+    marginTop: 10,
   },
   headerText: {
     fontWeight: "600",
   },
-  highlight: {
-    color: "#ff6600",
-    fontWeight: "600",
-  },
   footer: {
     marginTop: 6,
   },