Khởi tạo ban đầu

2025-11-28 16:59:57 +07:00
parent 2911be97b2
commit 4ba46a7df2
131 changed files with 28066 additions and 0 deletions
--- a/components/tripInfo/modal/CrewDetailModal.tsx
+++ b/components/tripInfo/modal/CrewDetailModal.tsx
@@ -0,0 +1,105 @@
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { useI18n } from "@/hooks/use-i18n";
+import { useThemeContext } from "@/hooks/use-theme-context";
+import React from "react";
+import { Modal, ScrollView, Text, TouchableOpacity, View } from "react-native";
+import { createStyles } from "./style/CrewDetailModal.styles";
+
+// ---------------------------
+// 🧩 Interface
+// ---------------------------
+
+interface CrewDetailModalProps {
+  visible: boolean;
+  onClose: () => void;
+  crewData: Model.TripCrews | null;
+}
+
+// ---------------------------
+// 👤 Component Modal
+// ---------------------------
+const CrewDetailModal: React.FC<CrewDetailModalProps> = ({
+  visible,
+  onClose,
+  crewData,
+}) => {
+  const { t } = useI18n();
+  const { colors } = useThemeContext();
+  const styles = React.useMemo(() => createStyles(colors), [colors]);
+
+  if (!crewData) return null;
+
+  const infoItems = [
+    {
+      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()
+        : t("trip.crewDetailModal.notUpdated"),
+    },
+    {
+      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()
+        : t("trip.crewDetailModal.notUpdated"),
+    },
+    {
+      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"),
+    },
+  ];
+
+  return (
+    <Modal
+      visible={visible}
+      animationType="slide"
+      presentationStyle="pageSheet"
+      onRequestClose={onClose}
+    >
+      <View style={styles.container}>
+        {/* Header */}
+        <View style={styles.header}>
+          <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" />
+            </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;