update login, modal detail in tripInfo

components/tripInfo/CrewListTable.tsx

@@ -1,6 +1,7 @@
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import React, { useRef, useState } from "react";
 import { Animated, Text, TouchableOpacity, View } from "react-native";
+import CrewDetailModal from "./modal/CrewDetailModal";
 import styles from "./style/CrewListTable.styles";
 
 // ---------------------------
@@ -11,6 +12,14 @@ interface CrewMember {
   maDinhDanh: string;
   ten: string;
   chucVu: string;
+  ngaySinh?: string;
+  cccd?: string;
+  soDienThoai?: string;
+  diaChi?: string;
+  ngayVaoLam?: string;
+  trinhDoChuyenMon?: string;
+  bangCap?: string;
+  tinhTrang?: string;
 }
 
 // ---------------------------
@@ -22,21 +31,65 @@ const data: CrewMember[] = [
     maDinhDanh: "ChuTau",
     ten: "Nguyễn Nhật Minh",
     chucVu: "Chủ tàu",
+    ngaySinh: "08/06/2006",
+    cccd: "079085012345",
+    soDienThoai: "0912345678",
+    diaChi: "Hà Nội",
+    ngayVaoLam: "",
+    trinhDoChuyenMon: "Thuyền trưởng hạng I",
+    bangCap: "Bằng thuyền trưởng xa bờ",
+    tinhTrang: "Đang làm việc",
   },
   {
     id: "1",
     maDinhDanh: "TV001",
     ten: "Nguyễn Văn A",
     chucVu: "Thuyền trưởng",
+    ngaySinh: "20/05/1988",
+    cccd: "079088011111",
+    soDienThoai: "0901234567",
+    diaChi: "456 Đường Cảng, Phường Thanh Khê, Đà Nẵng",
+    ngayVaoLam: "15/06/2015",
+    trinhDoChuyenMon: "Thuyền trưởng hạng II",
+    bangCap: "Bằng thuyền trưởng ven bờ",
+    tinhTrang: "Đang làm việc",
+  },
+  {
+    id: "2",
+    maDinhDanh: "TV002",
+    ten: "Trần Văn B",
+    chucVu: "Máy trưởng",
+    ngaySinh: "10/08/1990",
+    cccd: "079090022222",
+    soDienThoai: "0987654321",
+    diaChi: "789 Đường Nguyễn Văn Linh, Quận Sơn Trà, Đà Nẵng",
+    ngayVaoLam: "20/03/2016",
+    trinhDoChuyenMon: "Máy trưởng hạng III",
+    bangCap: "Bằng máy trưởng ven bờ",
+    tinhTrang: "Đang làm việc",
+  },
+  {
+    id: "3",
+    maDinhDanh: "TV003",
+    ten: "Lê Văn C",
+    chucVu: "Thủy thủ",
+    ngaySinh: "25/12/1995",
+    cccd: "079095033333",
+    soDienThoai: "0976543210",
+    diaChi: "321 Đường Hoàng Sa, Quận Ngũ Hành Sơn, Đà Nẵng",
+    ngayVaoLam: "10/07/2018",
+    trinhDoChuyenMon: "Thủy thủ hạng I",
+    bangCap: "Chứng chỉ thủy thủ",
+    tinhTrang: "Đang làm việc",
   },
-  { 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 = () => {
   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 [selectedCrew, setSelectedCrew] = useState<CrewMember | null>(null);
   const tongThanhVien = data.length;
 
   const handleToggle = () => {
@@ -50,7 +103,16 @@ const CrewListTable: React.FC = () => {
   };
 
   const handleCrewPress = (crewId: string) => {
-    console.log("Crew ID:", crewId);
+    const crew = data.find((item) => item.id === crewId);
+    if (crew) {
+      setSelectedCrew(crew);
+      setModalVisible(true);
+    }
+  };
+
+  const handleCloseModal = () => {
+    setModalVisible(false);
+    setSelectedCrew(null);
   };
 
   return (
@@ -157,6 +219,13 @@ const CrewListTable: React.FC = () => {
           <Text style={[styles.cell, styles.right]}></Text>
         </View>
       </Animated.View>
+
+      {/* Modal chi tiết thuyền viên */}
+      <CrewDetailModal
+        visible={modalVisible}
+        onClose={handleCloseModal}
+        crewData={selectedCrew}
+      />
     </View>
   );
 };