add en/vi language

components/tripInfo/modal/CrewDetailModal.tsx

@@ -1,4 +1,5 @@
 import { IconSymbol } from "@/components/ui/icon-symbol";
+import { useI18n } from "@/hooks/use-i18n";
 import React from "react";
 import { Modal, ScrollView, Text, TouchableOpacity, View } from "react-native";
 import styles from "./style/CrewDetailModal.styles";
@@ -21,30 +22,46 @@ const CrewDetailModal: React.FC<CrewDetailModalProps> = ({
   onClose,
   crewData,
 }) => {
+  const { t } = useI18n();
+
   if (!crewData) return null;
 
   const infoItems = [
-    { label: "Mã định danh", value: crewData.Person.personal_id },
-    { label: "Họ và tên", value: crewData.Person.name },
-    { label: "Chức vụ", value: crewData.role },
     {
-      label: "Ngày sinh",
+      label: t("trip.crewDetailModal.personalId"),
+      value: crewData.Person.personal_id,
+    },
+    { label: t("trip.crewDetailModal.fullName"), value: crewData.Person.name },
+    { label: t("trip.crewDetailModal.role"), value: crewData.role },
+    {
+      label: t("trip.crewDetailModal.birthDate"),
       value: crewData.Person.birth_date
         ? new Date(crewData.Person.birth_date).toLocaleDateString()
-        : "Chưa cập nhật",
+        : t("trip.crewDetailModal.notUpdated"),
     },
-    { label: "Số điện thoại", value: crewData.Person.phone || "Chưa cập nhật" },
-    { label: "Địa chỉ", value: crewData.Person.address || "Chưa cập nhật" },
     {
-      label: "Ngày vào làm",
+      label: t("trip.crewDetailModal.phone"),
+      value: crewData.Person.phone || t("trip.crewDetailModal.notUpdated"),
+    },
+    {
+      label: t("trip.crewDetailModal.address"),
+      value: crewData.Person.address || t("trip.crewDetailModal.notUpdated"),
+    },
+    {
+      label: t("trip.crewDetailModal.joinedDate"),
       value: crewData.joined_at
         ? new Date(crewData.joined_at).toLocaleDateString()
-        : "Chưa cập nhật",
+        : t("trip.crewDetailModal.notUpdated"),
     },
-    { label: "Ghi chú", value: crewData.note || "Chưa cập nhật" },
     {
-      label: "Tình trạng",
-      value: crewData.left_at ? "Đã nghỉ" : "Đang làm việc",
+      label: t("trip.crewDetailModal.note"),
+      value: crewData.note || t("trip.crewDetailModal.notUpdated"),
+    },
+    {
+      label: t("trip.crewDetailModal.status"),
+      value: crewData.left_at
+        ? t("trip.crewDetailModal.resigned")
+        : t("trip.crewDetailModal.working"),
     },
   ];
 
@@ -58,7 +75,7 @@ const CrewDetailModal: React.FC<CrewDetailModalProps> = ({
       <View style={styles.container}>
         {/* Header */}
         <View style={styles.header}>
-          <Text style={styles.title}>Thông tin thuyền viên</Text>
+          <Text style={styles.title}>{t("trip.crewDetailModal.title")}</Text>
           <TouchableOpacity onPress={onClose} style={styles.closeButton}>
             <View style={styles.closeIconButton}>
               <IconSymbol name="xmark" size={28} color="#fff" />