update tripCostTable, FishingToolsList, CrewListTable in tripInfo

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;