update login, modal detail in tripInfo

components/tripInfo/modal/CrewDetailModal.tsx

@@ -0,0 +1,91 @@
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import React from "react";
+import { Modal, ScrollView, Text, TouchableOpacity, View } from "react-native";
+import styles from "./style/CrewDetailModal.styles";
+
+// ---------------------------
+// 🧩 Interface
+// ---------------------------
+interface CrewMember {
+  id: string;
+  maDinhDanh: string;
+  ten: string;
+  chucVu: string;
+  ngaySinh?: string;
+  cccd?: string;
+  soDienThoai?: string;
+  diaChi?: string;
+  ngayVaoLam?: string;
+  trinhDoChuyenMon?: string;
+  bangCap?: string;
+  tinhTrang?: string;
+}
+
+interface CrewDetailModalProps {
+  visible: boolean;
+  onClose: () => void;
+  crewData: CrewMember | null;
+}
+
+// ---------------------------
+// 👤 Component Modal
+// ---------------------------
+const CrewDetailModal: React.FC<CrewDetailModalProps> = ({
+  visible,
+  onClose,
+  crewData,
+}) => {
+  if (!crewData) return null;
+
+  const infoItems = [
+    { label: "Mã định danh", value: crewData.maDinhDanh },
+    { label: "Họ và tên", value: crewData.ten },
+    { label: "Chức vụ", value: crewData.chucVu },
+    { label: "Ngày sinh", value: crewData.ngaySinh || "Chưa cập nhật" },
+    { label: "CCCD/CMND", value: crewData.cccd || "Chưa cập nhật" },
+    { label: "Số điện thoại", value: crewData.soDienThoai || "Chưa cập nhật" },
+    { label: "Địa chỉ", value: crewData.diaChi || "Chưa cập nhật" },
+    { label: "Ngày vào làm", value: crewData.ngayVaoLam || "Chưa cập nhật" },
+    {
+      label: "Trình độ chuyên môn",
+      value: crewData.trinhDoChuyenMon || "Chưa cập nhật",
+    },
+    { label: "Bằng cấp", value: crewData.bangCap || "Chưa cập nhật" },
+    { label: "Tình trạng", value: crewData.tinhTrang || "Đang làm việc" },
+  ];
+
+  return (
+    <Modal
+      visible={visible}
+      animationType="slide"
+      presentationStyle="pageSheet"
+      onRequestClose={onClose}
+    >
+      <View style={styles.container}>
+        {/* Header */}
+        <View style={styles.header}>
+          <Text style={styles.title}>Thông tin thuyền viên</Text>
+          <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+            <View style={styles.closeIconButton}>
+              <IconSymbol name="xmark" size={28} color="#fff" />
+            </View>
+          </TouchableOpacity>
+        </View>
+
+        {/* Content */}
+        <ScrollView style={styles.content}>
+          <View style={styles.infoCard}>
+            {infoItems.map((item, index) => (
+              <View key={index} style={styles.infoRow}>
+                <Text style={styles.infoLabel}>{item.label}</Text>
+                <Text style={styles.infoValue}>{item.value}</Text>
+              </View>
+            ))}
+          </View>
+        </ScrollView>
+      </View>
+    </Modal>
+  );
+};
+
+export default CrewDetailModal;