thêm tab "Xem chi tiết chuyến đi", "Xem chi tiết thành viên chuyến đi", tái sử dụng lại components modal tripForm

components/diary/TripCrewModal/CrewList.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  FlatList,
+  Platform,
+} from "react-native";
+import { useThemeContext } from "@/hooks/use-theme-context";
+import { useI18n } from "@/hooks/use-i18n";
+import CrewCard from "./CrewCard";
+
+interface CrewListProps {
+  crews: Model.TripCrews[];
+  onEdit?: (crew: Model.TripCrews) => void;
+  onDelete?: (crew: Model.TripCrews) => void;
+}
+
+export default function CrewList({ crews, onEdit, onDelete }: CrewListProps) {
+  const { colors } = useThemeContext();
+  const { t } = useI18n();
+
+  const renderItem = ({ item }: { item: Model.TripCrews }) => (
+    <CrewCard crew={item} onEdit={onEdit} onDelete={onDelete} />
+  );
+
+  const keyExtractor = (item: Model.TripCrews, index: number) => 
+    `${item.PersonalID}-${index}`;
+
+  const renderEmpty = () => (
+    <View style={styles.emptyContainer}>
+      <Text style={[styles.emptyText, { color: colors.textSecondary }]}>
+        {t("diary.crew.noCrewMembers")}
+      </Text>
+    </View>
+  );
+
+  return (
+    <FlatList
+      data={crews}
+      renderItem={renderItem}
+      keyExtractor={keyExtractor}
+      ListEmptyComponent={renderEmpty}
+      showsVerticalScrollIndicator={false}
+      contentContainerStyle={styles.listContent}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  listContent: {
+    paddingBottom: 20,
+    flexGrow: 1,
+  },
+  emptyContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    paddingVertical: 60,
+  },
+  emptyText: {
+    fontSize: 16,
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
+  },
+});