106 lines
3.2 KiB
TypeScript
106 lines
3.2 KiB
TypeScript
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;
|