Khởi tạo ban đầu

components/AlarmList.tsx

@@ -0,0 +1,76 @@
+import dayjs from "dayjs";
+import { FlatList, Text, TouchableOpacity, View } from "react-native";
+
+type AlarmItem = {
+  name: string;
+  t: number;
+  level: number;
+  id: string;
+};
+
+type AlarmProp = {
+  alarmsData: AlarmItem[];
+  onPress?: (alarm: AlarmItem) => void;
+};
+
+const AlarmList = ({ alarmsData, onPress }: AlarmProp) => {
+  const sortedAlarmsData = [...alarmsData].sort((a, b) => b.level - a.level);
+  return (
+    <FlatList
+      data={sortedAlarmsData}
+      renderItem={({ item }) => (
+        <TouchableOpacity
+          onPress={() => onPress?.(item)}
+          className="flex flex-row gap-5 p-3 justify-start items-baseline w-full"
+        >
+          <View
+            className={`flex-none h-3 w-3 rounded-full ${getBackgroundColorByLevel(
+              item.level
+            )}`}
+          ></View>
+          <View className="flex">
+            <Text className={`grow text-lg ${getTextColorByLevel(item.level)}`}>
+              {item.name}
+            </Text>
+            <Text className="grow text-md text-gray-400">
+              {formatTimestamp(item.t)}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      )}
+      keyExtractor={(item) => item.id}
+    />
+  );
+};
+
+const getBackgroundColorByLevel = (level: number) => {
+  switch (level) {
+    case 1:
+      return "bg-yellow-500";
+    case 2:
+      return "bg-orange-500";
+    case 3:
+      return "bg-red-500";
+    default:
+      return "bg-gray-500";
+  }
+};
+
+const getTextColorByLevel = (level: number) => {
+  switch (level) {
+    case 1:
+      return "text-yellow-600";
+    case 2:
+      return "text-orange-600";
+    case 3:
+      return "text-red-600";
+    default:
+      return "text-gray-600";
+  }
+};
+
+const formatTimestamp = (timestamp: number) => {
+  return dayjs.unix(timestamp).format("DD/MM/YYYY HH:mm:ss");
+};
+
+export default AlarmList;

components/ButtonCancelTrip.tsx

@@ -0,0 +1,48 @@
+import { useI18n } from "@/hooks/use-i18n";
+import React from "react";
+import { StyleSheet, Text, TouchableOpacity } from "react-native";
+
+interface ButtonCancelTripProps {
+  title?: string;
+  onPress?: () => void;
+}
+
+const ButtonCancelTrip: React.FC<ButtonCancelTripProps> = ({
+  title,
+  onPress,
+}) => {
+  const { t } = useI18n();
+  const displayTitle = title || t("trip.buttonCancelTrip.title");
+  return (
+    <TouchableOpacity
+      style={styles.button}
+      onPress={onPress}
+      activeOpacity={0.8}
+    >
+      <Text style={styles.text}>{displayTitle}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: "#f45b57", // đỏ nhẹ giống ảnh
+    borderRadius: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    alignSelf: "flex-start",
+    shadowColor: "#000",
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+    shadowOffset: { width: 0, height: 1 },
+    elevation: 2, // cho Android
+  },
+  text: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600",
+    textAlign: "center",
+  },
+});
+
+export default ButtonCancelTrip;

components/ButtonCreateNewHaulOrTrip.tsx

@@ -0,0 +1,213 @@
+import { queryGpsData } from "@/controller/DeviceController";
+import {
+  queryStartNewHaul,
+  queryUpdateTripState,
+} from "@/controller/TripController";
+import { useI18n } from "@/hooks/use-i18n";
+import {
+  showErrorToast,
+  showSuccessToast,
+  showWarningToast,
+} from "@/services/toast_service";
+import { useTrip } from "@/state/use-trip";
+import { AntDesign } from "@expo/vector-icons";
+import React, { useEffect, useState } from "react";
+import { Alert, StyleSheet, View } from "react-native";
+import IconButton from "./IconButton";
+import CreateOrUpdateHaulModal from "./tripInfo/modal/CreateOrUpdateHaulModal";
+
+interface StartButtonProps {
+  gpsData?: Model.GPSResponse;
+  onPress?: () => void;
+}
+
+interface a {
+  fishingLogs?: Model.FishingLogInfo[] | null;
+  onCallback?: (fishingLogs: Model.FishingLogInfo[]) => void;
+  isEditing?: boolean;
+}
+
+const ButtonCreateNewHaulOrTrip: React.FC<StartButtonProps> = ({
+  gpsData,
+  onPress,
+}) => {
+  const [isStarted, setIsStarted] = useState(false);
+  const [isFinishHaulModalOpen, setIsFinishHaulModalOpen] = useState(false);
+  const { t } = useI18n();
+
+  const { trip, getTrip } = useTrip();
+  useEffect(() => {
+    getTrip();
+  }, []);
+
+  const checkHaulFinished = () => {
+    return trip?.fishing_logs?.some((h) => h.status === 0);
+  };
+
+  const handlePress = () => {
+    if (isStarted) {
+      Alert.alert(t("trip.endHaulTitle"), t("trip.endHaulConfirm"), [
+        {
+          text: t("trip.cancelButton"),
+          style: "cancel",
+        },
+        {
+          text: t("trip.endButton"),
+          onPress: () => {
+            setIsStarted(false);
+            Alert.alert(t("trip.successTitle"), t("trip.endHaulSuccess"));
+          },
+        },
+      ]);
+    } else {
+      Alert.alert(t("trip.startHaulTitle"), t("trip.startHaulConfirm"), [
+        {
+          text: t("trip.cancelButton"),
+          style: "cancel",
+        },
+        {
+          text: t("trip.startButton"),
+          onPress: () => {
+            setIsStarted(true);
+            Alert.alert(t("trip.successTitle"), t("trip.startHaulSuccess"));
+          },
+        },
+      ]);
+    }
+
+    if (onPress) {
+      onPress();
+    }
+  };
+
+  const handleStartTrip = async (state: number, note?: string) => {
+    if (trip?.trip_status !== 2) {
+      showWarningToast(t("trip.alreadyStarted"));
+      return;
+    }
+    try {
+      const resp = await queryUpdateTripState({
+        status: state,
+        note: note || "",
+      });
+      if (resp.status === 200) {
+        showSuccessToast(t("trip.startTripSuccess"));
+        await getTrip();
+      }
+    } catch (error) {
+      console.error("Error stating trip :", error);
+      showErrorToast("");
+    }
+  };
+
+  const createNewHaul = async () => {
+    if (trip?.fishing_logs?.some((f) => f.status === 0)) {
+      showWarningToast(t("trip.finishCurrentHaul"));
+      return;
+    }
+    if (!gpsData) {
+      const response = await queryGpsData();
+      gpsData = response.data;
+    }
+    try {
+      const body: Model.NewFishingLogRequest = {
+        trip_id: trip?.id || "",
+        start_at: new Date(),
+        start_lat: gpsData.lat,
+        start_lon: gpsData.lon,
+        weather_description: t("trip.weatherDescription"),
+      };
+
+      const resp = await queryStartNewHaul(body);
+      if (resp.status === 200) {
+        showSuccessToast(t("trip.startHaulSuccess"));
+        await getTrip();
+      } else {
+        showErrorToast(t("trip.createHaulFailed"));
+      }
+    } catch (error) {
+      console.log(error);
+      // showErrorToast(t("trip.createHaulFailed"));
+    }
+  };
+
+  // Không render gì nếu trip đã hoàn thành hoặc bị hủy
+  if (trip?.trip_status === 4 || trip?.trip_status === 5) {
+    return null;
+  }
+
+  return (
+    <View>
+      {trip?.trip_status === 2 ? (
+        <IconButton
+          icon={<AntDesign name="plus" />}
+          type="primary"
+          style={{ backgroundColor: "green", borderRadius: 10 }}
+          onPress={async () => handleStartTrip(3)}
+        >
+          {t("trip.startTrip")}
+        </IconButton>
+      ) : checkHaulFinished() ? (
+        <IconButton
+          icon={<AntDesign name="plus" color={"white"} />}
+          type="primary"
+          style={{ borderRadius: 10 }}
+          onPress={() => setIsFinishHaulModalOpen(true)}
+        >
+          {t("trip.endHaul")}
+        </IconButton>
+      ) : (
+        <IconButton
+          icon={<AntDesign name="plus" color={"white"} />}
+          type="primary"
+          style={{ borderRadius: 10 }}
+          onPress={async () => {
+            createNewHaul();
+          }}
+        >
+          {t("trip.startHaul")}
+        </IconButton>
+      )}
+      <CreateOrUpdateHaulModal
+        fishingLog={trip?.fishing_logs?.find((f) => f.status === 0)!}
+        fishingLogIndex={trip?.fishing_logs?.length!}
+        isVisible={isFinishHaulModalOpen}
+        onClose={function (): void {
+          setIsFinishHaulModalOpen(false);
+        }}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: "#4ecdc4", // màu ngọc lam
+    borderRadius: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    alignSelf: "flex-start",
+    shadowColor: "#000",
+    shadowOpacity: 0.15,
+    shadowRadius: 3,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 3, // hiệu ứng nổi trên Android
+  },
+  buttonActive: {
+    backgroundColor: "#e74c3c", // màu đỏ khi đang hoạt động
+  },
+  content: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  icon: {
+    marginRight: 6,
+  },
+  text: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+});
+
+export default ButtonCreateNewHaulOrTrip;

components/ButtonEndTrip.tsx

@@ -0,0 +1,45 @@
+import { useI18n } from "@/hooks/use-i18n";
+import React from "react";
+import { StyleSheet, Text, TouchableOpacity } from "react-native";
+
+interface ButtonEndTripProps {
+  title?: string;
+  onPress?: () => void;
+}
+
+const ButtonEndTrip: React.FC<ButtonEndTripProps> = ({ title, onPress }) => {
+  const { t } = useI18n();
+  const displayTitle = title || t("trip.buttonEndTrip.title");
+  return (
+    <TouchableOpacity
+      style={styles.button}
+      onPress={onPress}
+      activeOpacity={0.85}
+    >
+      <Text style={styles.text}>{displayTitle}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: "#ed9434", // màu cam sáng
+    borderRadius: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 28,
+    alignSelf: "flex-start",
+    shadowColor: "#000",
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+    shadowOffset: { width: 0, height: 1 },
+    elevation: 2, // hiệu ứng nổi trên Android
+  },
+  text: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600",
+    textAlign: "center",
+  },
+});
+
+export default ButtonEndTrip;

components/IconButton.tsx

@@ -0,0 +1,159 @@
+import React from "react";
+import {
+  ActivityIndicator,
+  GestureResponderEvent,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from "react-native";
+
+type ButtonType = "primary" | "default" | "dashed" | "text" | "link" | "danger";
+type ButtonShape = "default" | "circle" | "round";
+type ButtonSize = "small" | "middle" | "large";
+
+export interface IconButtonProps {
+  type?: ButtonType;
+  shape?: ButtonShape;
+  size?: ButtonSize;
+  icon?: React.ReactNode; // render an icon component, e.g. <AntDesign name="plus" />
+  loading?: boolean;
+  disabled?: boolean;
+  onPress?: (e?: GestureResponderEvent) => void;
+  children?: React.ReactNode; // label text
+  style?: StyleProp<ViewStyle>;
+  block?: boolean; // full width
+  activeOpacity?: number;
+}
+
+/**
+ * IconButton
+ * A lightweight Button component inspired by Ant Design Button API, tuned for React Native.
+ * Accepts an `icon` prop as a React node for maximum flexibility.
+ */
+const IconButton: React.FC<IconButtonProps> = ({
+  type = "default",
+  shape = "default",
+  size = "middle",
+  icon,
+  loading = false,
+  disabled = false,
+  onPress,
+  children,
+  style,
+  block = false,
+  activeOpacity = 0.8,
+}) => {
+  const sizeMap = {
+    small: { height: 32, fontSize: 14, paddingHorizontal: 10 },
+    middle: { height: 40, fontSize: 16, paddingHorizontal: 14 },
+    large: { height: 48, fontSize: 18, paddingHorizontal: 18 },
+  } as const;
+
+  const colors: Record<
+    ButtonType,
+    { backgroundColor?: string; textColor: string; borderColor?: string }
+  > = {
+    primary: { backgroundColor: "#4ecdc4", textColor: "#fff" },
+    default: {
+      backgroundColor: "#f2f2f2",
+      textColor: "#111",
+      borderColor: "#e6e6e6",
+    },
+    dashed: {
+      backgroundColor: "#fff",
+      textColor: "#111",
+      borderColor: "#d9d9d9",
+    },
+    text: { backgroundColor: "transparent", textColor: "#111" },
+    link: { backgroundColor: "transparent", textColor: "#4ecdc4" },
+    danger: { backgroundColor: "#e74c3c", textColor: "#fff" },
+  };
+
+  const sz = sizeMap[size];
+  const color = colors[type];
+
+  const isCircle = shape === "circle";
+  const isRound = shape === "round";
+
+  const handlePress = (e: GestureResponderEvent) => {
+    if (disabled || loading) return;
+    onPress?.(e);
+  };
+
+  return (
+    <TouchableOpacity
+      activeOpacity={activeOpacity}
+      onPress={handlePress}
+      disabled={disabled || loading}
+      style={[
+        styles.button,
+        {
+          height: sz.height,
+          paddingHorizontal: isCircle ? 0 : sz.paddingHorizontal,
+          backgroundColor: color.backgroundColor ?? "transparent",
+          borderColor: color.borderColor ?? "transparent",
+          borderWidth: type === "dashed" ? 1 : color.borderColor ? 1 : 0,
+          width: isCircle ? sz.height : block ? "100%" : undefined,
+          borderRadius: isCircle ? sz.height / 2 : isRound ? 999 : 8,
+          opacity: disabled ? 0.6 : 1,
+        },
+        type === "dashed" ? { borderStyle: "dashed" } : null,
+        style,
+      ]}
+    >
+      <View style={styles.content}>
+        {loading ? (
+          <ActivityIndicator
+            size={"small"}
+            color={color.textColor}
+            style={styles.iconContainer}
+          />
+        ) : icon ? (
+          <View style={styles.iconContainer}>{icon}</View>
+        ) : null}
+
+        {children ? (
+          <Text
+            numberOfLines={1}
+            style={[
+              styles.text,
+              {
+                color: color.textColor,
+                fontSize: sz.fontSize,
+                marginLeft: icon || loading ? 6 : 0,
+              },
+            ]}
+          >
+            {children}
+          </Text>
+        ) : null}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 8,
+    borderColor: "transparent",
+  },
+  content: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  iconContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  text: {
+    fontWeight: "600",
+  },
+});
+
+export default IconButton;

components/ScanQRCode.tsx

@@ -0,0 +1,239 @@
+import { CameraView, useCameraPermissions } from "expo-camera";
+import { useEffect, useRef, useState } from "react";
+import {
+  ActivityIndicator,
+  Modal,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
+
+interface ScanQRCodeProps {
+  visible: boolean;
+  onClose: () => void;
+  onScanned: (data: string) => void;
+}
+
+export default function ScanQRCode({
+  visible,
+  onClose,
+  onScanned,
+}: ScanQRCodeProps) {
+  const [permission, requestPermission] = useCameraPermissions();
+  const [scanned, setScanned] = useState(false);
+  const cameraRef = useRef(null);
+  // Dùng ref để chặn quét nhiều lần trong cùng một frame/event loop
+  const hasScannedRef = useRef(false);
+
+  // Request camera permission when component mounts or when visible changes to true
+  useEffect(() => {
+    if (visible && !permission?.granted) {
+      requestPermission();
+    }
+  }, [visible, permission, requestPermission]);
+
+  // Reset scanned state when modal opens
+  useEffect(() => {
+    if (visible) {
+      setScanned(false);
+    }
+  }, [visible]);
+
+  // Mỗi khi reset scanned state thì reset luôn ref guard
+  useEffect(() => {
+    if (!scanned) {
+      hasScannedRef.current = false;
+    }
+  }, [scanned]);
+
+  const handleBarCodeScanned = ({
+    type,
+    data,
+  }: {
+    type: string;
+    data: string;
+  }) => {
+    // Nếu đã scan rồi, bỏ qua
+    if (hasScannedRef.current || scanned) return;
+    hasScannedRef.current = true;
+    setScanned(true);
+    onScanned(data);
+    onClose();
+  };
+
+  if (!permission) {
+    return (
+      <Modal visible={visible} transparent animationType="slide">
+        <View style={styles.container}>
+          <View style={styles.loadingContainer}>
+            <ActivityIndicator size="large" color="#0000ff" />
+            <Text style={styles.loadingText}>
+              Requesting camera permission...
+            </Text>
+          </View>
+        </View>
+      </Modal>
+    );
+  }
+
+  if (!permission.granted) {
+    return (
+      <Modal visible={visible} transparent animationType="slide">
+        <View style={styles.container}>
+          <View style={styles.permissionContainer}>
+            <Text style={styles.permissionTitle}>
+              Camera Permission Required
+            </Text>
+            <Text style={styles.permissionText}>
+              This app needs camera access to scan QR codes. Please allow camera
+              access in your settings.
+            </Text>
+            <Pressable
+              style={styles.button}
+              onPress={() => requestPermission()}
+            >
+              <Text style={styles.buttonText}>Request Permission</Text>
+            </Pressable>
+            <Pressable
+              style={[styles.button, styles.cancelButton]}
+              onPress={onClose}
+            >
+              <Text style={styles.buttonText}>Cancel</Text>
+            </Pressable>
+          </View>
+        </View>
+      </Modal>
+    );
+  }
+
+  return (
+    <Modal visible={visible} transparent animationType="slide">
+      <CameraView
+        ref={cameraRef}
+        style={styles.camera}
+        // Chỉ gắn handler khi chưa scan để ngắt lắng nghe ngay lập tức sau khi quét thành công
+        onBarcodeScanned={scanned ? undefined : handleBarCodeScanned}
+        barcodeScannerSettings={{
+          barcodeTypes: ["qr"],
+        }}
+      >
+        <View style={styles.overlay}>
+          <View style={styles.unfocusedContainer} />
+          <View style={styles.focusedRow}>
+            <View style={styles.focusedContainer} />
+          </View>
+          <View style={styles.unfocusedContainer} />
+
+          <View style={styles.bottomContainer}>
+            <Text style={styles.scanningText}>
+              {/* Align QR code within the frame */}
+              Đặt mã QR vào khung hình
+            </Text>
+            <Pressable style={styles.closeButton} onPress={onClose}>
+              <Text style={styles.closeButtonText}>✕ Đóng</Text>
+            </Pressable>
+          </View>
+        </View>
+      </CameraView>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.8)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  loadingContainer: {
+    alignItems: "center",
+    gap: 10,
+  },
+  loadingText: {
+    color: "#fff",
+    fontSize: 16,
+  },
+  permissionContainer: {
+    backgroundColor: "#fff",
+    marginHorizontal: 20,
+    borderRadius: 12,
+    padding: 20,
+    alignItems: "center",
+    gap: 15,
+  },
+  permissionTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "#333",
+  },
+  permissionText: {
+    fontSize: 14,
+    color: "#666",
+    textAlign: "center",
+    lineHeight: 20,
+  },
+  button: {
+    backgroundColor: "#007AFF",
+    paddingVertical: 12,
+    paddingHorizontal: 30,
+    borderRadius: 8,
+    width: "100%",
+    alignItems: "center",
+  },
+  cancelButton: {
+    backgroundColor: "#666",
+  },
+  buttonText: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+  camera: {
+    flex: 1,
+  },
+  overlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+  },
+  unfocusedContainer: {
+    flex: 1,
+  },
+  focusedRow: {
+    height: "80%",
+    width: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  focusedContainer: {
+    aspectRatio: 1,
+    width: "70%",
+    borderColor: "#00ff00",
+    borderWidth: 3,
+    borderRadius: 10,
+  },
+  bottomContainer: {
+    flex: 1,
+    justifyContent: "flex-end",
+    alignItems: "center",
+    paddingBottom: 40,
+    gap: 20,
+  },
+  scanningText: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "500",
+  },
+  closeButton: {
+    backgroundColor: "rgba(0, 0, 0, 0.6)",
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    borderRadius: 8,
+  },
+  closeButtonText: {
+    color: "#fff",
+    fontSize: 14,
+    fontWeight: "600",
+  },
+});

components/Select.tsx

@@ -0,0 +1,301 @@
+import { useThemeContext } from "@/hooks/use-theme-context";
+import { AntDesign } from "@expo/vector-icons";
+import React, { useEffect, useState } from "react";
+import {
+  ActivityIndicator,
+  ScrollView,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from "react-native";
+
+export interface SelectOption {
+  label: string;
+  value: string | number;
+  disabled?: boolean;
+}
+
+export interface SelectProps {
+  value?: string | number;
+  defaultValue?: string | number;
+  options: SelectOption[];
+  onChange?: (value: string | number | undefined) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  loading?: boolean;
+  allowClear?: boolean;
+  showSearch?: boolean;
+  mode?: "single" | "multiple"; // multiple not implemented yet
+  style?: StyleProp<ViewStyle>;
+  size?: "small" | "middle" | "large";
+  listStyle?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Select
+ * A Select component inspired by Ant Design, adapted for React Native.
+ * Supports single selection, search, clear, loading, disabled states.
+ */
+const Select: React.FC<SelectProps> = ({
+  value,
+  defaultValue,
+  options,
+  onChange,
+  placeholder = "Select an option",
+  disabled = false,
+  loading = false,
+  allowClear = false,
+  showSearch = false,
+  mode = "single",
+  style,
+  listStyle,
+  size = "middle",
+}) => {
+  const [selectedValue, setSelectedValue] = useState<
+    string | number | undefined
+  >(value ?? defaultValue);
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchText, setSearchText] = useState("");
+  const [containerHeight, setContainerHeight] = useState(0);
+
+  useEffect(() => {
+    setSelectedValue(value);
+  }, [value]);
+
+  const filteredOptions = showSearch
+    ? options.filter((opt) =>
+        opt.label.toLowerCase().includes(searchText.toLowerCase())
+      )
+    : options;
+
+  const selectedOption = options.find((opt) => opt.value === selectedValue);
+
+  const handleSelect = (val: string | number) => {
+    setSelectedValue(val);
+    onChange?.(val);
+    setIsOpen(false);
+    setSearchText("");
+  };
+
+  const handleClear = () => {
+    setSelectedValue(undefined);
+    onChange?.(undefined);
+  };
+
+  const sizeMap = {
+    small: { height: 32, fontSize: 14, paddingHorizontal: 10 },
+    middle: { height: 40, fontSize: 16, paddingHorizontal: 14 },
+    large: { height: 48, fontSize: 18, paddingHorizontal: 18 },
+  };
+
+  const sz = sizeMap[size];
+
+  // Theme colors from context (consistent with other components)
+  const { colors } = useThemeContext();
+  const selectBackgroundColor = disabled
+    ? colors.backgroundSecondary
+    : colors.surface;
+
+  return (
+    <View style={styles.wrapper}>
+      <TouchableOpacity
+        style={[
+          styles.container,
+          {
+            height: sz.height,
+            paddingHorizontal: sz.paddingHorizontal,
+            backgroundColor: selectBackgroundColor,
+            borderColor: disabled ? colors.border : colors.primary,
+          },
+          style,
+        ]}
+        onPress={() => !disabled && !loading && setIsOpen(!isOpen)}
+        disabled={disabled || loading}
+        activeOpacity={0.8}
+        onLayout={(e) => setContainerHeight(e.nativeEvent.layout.height)}
+      >
+        <View style={styles.content}>
+          {loading ? (
+            <ActivityIndicator size="small" color={colors.primary} />
+          ) : (
+            <Text
+              style={[
+                styles.text,
+                {
+                  fontSize: sz.fontSize,
+                  color: disabled
+                    ? colors.textSecondary
+                    : selectedValue
+                    ? colors.text
+                    : colors.textSecondary,
+                },
+              ]}
+              numberOfLines={1}
+            >
+              {selectedOption?.label || placeholder}
+            </Text>
+          )}
+        </View>
+        <View style={styles.suffix}>
+          {allowClear && selectedValue && !loading ? (
+            <TouchableOpacity onPress={handleClear} style={styles.icon}>
+              <AntDesign name="close" size={16} color={colors.textSecondary} />
+            </TouchableOpacity>
+          ) : null}
+          <AntDesign
+            name={isOpen ? "up" : "down"}
+            size={14}
+            color={colors.textSecondary}
+            style={styles.arrow}
+          />
+        </View>
+      </TouchableOpacity>
+
+      {isOpen && (
+        <View
+          style={[
+            styles.dropdown,
+            {
+              top: containerHeight,
+              backgroundColor: colors.background,
+              borderColor: colors.border,
+            },
+          ]}
+        >
+          {showSearch && (
+            <TextInput
+              style={[
+                styles.searchInput,
+                {
+                  backgroundColor: colors.background,
+                  borderColor: colors.border,
+                  color: colors.text,
+                },
+              ]}
+              placeholder="Search..."
+              placeholderTextColor={colors.textSecondary}
+              value={searchText}
+              onChangeText={setSearchText}
+              autoFocus
+            />
+          )}
+          <ScrollView style={[styles.list, listStyle]}>
+            {filteredOptions.map((item) => (
+              <TouchableOpacity
+                key={item.value}
+                style={[
+                  styles.option,
+                  {
+                    borderBottomColor: colors.separator,
+                  },
+                  item.disabled && styles.optionDisabled,
+                  selectedValue === item.value && {
+                    backgroundColor: colors.primary + "20", // Add transparency to primary color
+                  },
+                ]}
+                onPress={() => !item.disabled && handleSelect(item.value)}
+                disabled={item.disabled}
+              >
+                <Text
+                  style={[
+                    styles.optionText,
+                    {
+                      color: colors.text,
+                    },
+                    item.disabled && {
+                      color: colors.textSecondary,
+                    },
+                    selectedValue === item.value && {
+                      color: colors.primary,
+                      fontWeight: "600",
+                    },
+                  ]}
+                >
+                  {item.label}
+                </Text>
+                {selectedValue === item.value && (
+                  <AntDesign name="check" size={16} color={colors.primary} />
+                )}
+              </TouchableOpacity>
+            ))}
+          </ScrollView>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: "relative",
+  },
+  container: {
+    borderWidth: 1,
+    borderRadius: 8,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  content: {
+    flex: 1,
+  },
+  text: {
+    // Color is set dynamically via theme
+  },
+  suffix: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  icon: {
+    marginRight: 8,
+  },
+  arrow: {
+    marginLeft: 4,
+  },
+  dropdown: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    borderWidth: 1,
+    borderTopWidth: 0,
+    borderRadius: 10,
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 8,
+    shadowColor: "#000",
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 5,
+    zIndex: 1000,
+  },
+  searchInput: {
+    borderWidth: 1,
+    borderRadius: 4,
+    padding: 8,
+    margin: 8,
+  },
+  list: {
+    maxHeight: 200,
+  },
+  option: {
+    padding: 12,
+    borderBottomWidth: 1,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  optionDisabled: {
+    opacity: 0.5,
+  },
+  // optionSelected is handled dynamically via inline styles
+  optionText: {
+    fontSize: 16,
+  },
+  // optionTextDisabled and optionTextSelected are handled dynamically via inline styles
+});
+
+export default Select;

components/external-link.tsx

@@ -0,0 +1,25 @@
+import { Href, Link } from 'expo-router';
+import { openBrowserAsync, WebBrowserPresentationStyle } from 'expo-web-browser';
+import { type ComponentProps } from 'react';
+
+type Props = Omit<ComponentProps<typeof Link>, 'href'> & { href: Href & string };
+
+export function ExternalLink({ href, ...rest }: Props) {
+  return (
+    <Link
+      target="_blank"
+      {...rest}
+      href={href}
+      onPress={async (event) => {
+        if (process.env.EXPO_OS !== 'web') {
+          // Prevent the default behavior of linking to the default browser on native.
+          event.preventDefault();
+          // Open the link in an in-app browser.
+          await openBrowserAsync(href, {
+            presentationStyle: WebBrowserPresentationStyle.AUTOMATIC,
+          });
+        }
+      }}
+    />
+  );
+}

components/haptic-tab.tsx

@@ -0,0 +1,18 @@
+import { BottomTabBarButtonProps } from '@react-navigation/bottom-tabs';
+import { PlatformPressable } from '@react-navigation/elements';
+import * as Haptics from 'expo-haptics';
+
+export function HapticTab(props: BottomTabBarButtonProps) {
+  return (
+    <PlatformPressable
+      {...props}
+      onPressIn={(ev) => {
+        if (process.env.EXPO_OS === 'ios') {
+          // Add a soft haptic feedback when pressing down on the tabs.
+          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        }
+        props.onPressIn?.(ev);
+      }}
+    />
+  );
+}

components/hello-wave.tsx

@@ -0,0 +1,19 @@
+import Animated from 'react-native-reanimated';
+
+export function HelloWave() {
+  return (
+    <Animated.Text
+      style={{
+        fontSize: 28,
+        lineHeight: 32,
+        marginTop: -6,
+        animationName: {
+          '50%': { transform: [{ rotate: '25deg' }] },
+        },
+        animationIterationCount: 4,
+        animationDuration: '300ms',
+      }}>
+      👋
+    </Animated.Text>
+  );
+}

components/map/Description.tsx

@@ -0,0 +1,24 @@
+import { ThemedText } from "@/components/themed-text";
+import { useAppTheme } from "@/hooks/use-app-theme";
+import { View } from "react-native";
+
+interface DescriptionProps {
+  title?: string;
+  description?: string;
+}
+export const Description = ({
+  title = "",
+  description = "",
+}: DescriptionProps) => {
+  const { colors } = useAppTheme();
+  return (
+    <View className="flex-row gap-2 ">
+      <ThemedText
+        style={{ color: colors.textSecondary, fontSize: 16 }}
+      >
+        {title}:
+      </ThemedText>
+      <ThemedText style={{ fontSize: 16 }}>{description}</ThemedText>
+    </View>
+  );
+};

components/map/GPSInfoPanel.tsx

@@ -0,0 +1,126 @@
+import { useAppTheme } from "@/hooks/use-app-theme";
+import { useI18n } from "@/hooks/use-i18n";
+import { convertToDMS, kmhToKnot } from "@/utils/geom";
+import { MaterialIcons } from "@expo/vector-icons";
+import { useEffect, useRef, useState } from "react";
+import { Animated, TouchableOpacity, View } from "react-native";
+import ButtonCreateNewHaulOrTrip from "../ButtonCreateNewHaulOrTrip";
+import { Description } from "./Description";
+type GPSInfoPanelProps = {
+  gpsData: Model.GPSResponse | undefined;
+};
+
+const GPSInfoPanel = ({ gpsData }: GPSInfoPanelProps) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const [panelHeight, setPanelHeight] = useState(0);
+  const translateY = useRef(new Animated.Value(0)).current;
+  const blockBottom = useRef(new Animated.Value(0)).current;
+  const { t } = useI18n();
+  const { colors, styles } = useAppTheme();
+
+  useEffect(() => {
+    Animated.timing(translateY, {
+      toValue: isExpanded ? 0 : 200, // Dịch chuyển xuống 200px khi thu gọn
+      duration: 500,
+      useNativeDriver: true,
+    }).start();
+  }, [isExpanded]);
+
+  useEffect(() => {
+    const targetBottom = isExpanded ? panelHeight + 12 : 10;
+    Animated.timing(blockBottom, {
+      toValue: targetBottom,
+      duration: 500,
+      useNativeDriver: false,
+    }).start();
+  }, [isExpanded, panelHeight, blockBottom]);
+
+  const togglePanel = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  return (
+    <>
+      {/* Khối hình vuông */}
+      <Animated.View
+        style={{
+          position: "absolute",
+          bottom: blockBottom,
+          left: 5,
+          borderRadius: 4,
+          zIndex: 30,
+        }}
+      >
+        <ButtonCreateNewHaulOrTrip gpsData={gpsData} />
+      </Animated.View>
+
+      <Animated.View
+        style={[
+          styles.card,
+          {
+            transform: [{ translateY }],
+            backgroundColor: colors.card,
+            borderRadius: 0,
+          },
+        ]}
+        className="absolute bottom-0 gap-5 right-0 px-4 pt-12 pb-2 left-0 h-auto w-full rounded-t-xl shadow-md"
+        onLayout={(event) => setPanelHeight(event.nativeEvent.layout.height)}
+      >
+        {/* Nút toggle ở top-right */}
+        <TouchableOpacity
+          onPress={togglePanel}
+          className="absolute top-2 right-2 z-10 rounded-full p-1"
+          style={{ backgroundColor: colors.card }}
+        >
+          <MaterialIcons
+            name={isExpanded ? "close" : "close"}
+            size={20}
+            color={colors.icon}
+          />
+        </TouchableOpacity>
+
+        <View className="flex-row justify-between">
+          <View className="flex-1">
+            <Description
+              title={t("home.latitude")}
+              description={convertToDMS(gpsData?.lat ?? 0, true)}
+            />
+          </View>
+          <View className="flex-1">
+            <Description
+              title={t("home.longitude")}
+              description={convertToDMS(gpsData?.lon ?? 0, false)}
+            />
+          </View>
+        </View>
+        <View className="flex-row justify-between">
+          <View className="flex-1">
+            <Description
+              title={t("home.speed")}
+              description={`${kmhToKnot(gpsData?.s ?? 0).toString()} knot`}
+            />
+          </View>
+          <View className="flex-1">
+            <Description
+              title={t("home.heading")}
+              description={`${gpsData?.h ?? 0}°`}
+            />
+          </View>
+        </View>
+      </Animated.View>
+
+      {/* Nút floating để mở lại panel khi thu gọn */}
+      {!isExpanded && (
+        <TouchableOpacity
+          onPress={togglePanel}
+          className="absolute bottom-5 right-2 z-20 rounded-full p-2 shadow-lg"
+          style={{ backgroundColor: colors.card }}
+        >
+          <MaterialIcons name="info-outline" size={24} color={colors.icon} />
+        </TouchableOpacity>
+      )}
+    </>
+  );
+};
+
+export default GPSInfoPanel;

components/map/PolygonWithLabel.tsx

@@ -0,0 +1,148 @@
+import { ANDROID_PLATFORM } from "@/constants";
+import { usePlatform } from "@/hooks/use-platform";
+import { getPolygonCenter } from "@/utils/polyline";
+import React, { useRef } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { MapMarker, Marker, Polygon } from "react-native-maps";
+
+export interface PolygonWithLabelProps {
+  coordinates: {
+    latitude: number;
+    longitude: number;
+  }[];
+  label?: string;
+  content?: string;
+  fillColor?: string;
+  strokeColor?: string;
+  strokeWidth?: number;
+  zIndex?: number;
+  zoomLevel?: number;
+}
+
+/**
+ * Component render Polygon kèm Label/Text ở giữa
+ */
+export const PolygonWithLabel: React.FC<PolygonWithLabelProps> = ({
+  coordinates,
+  label,
+  content,
+  fillColor = "rgba(16, 85, 201, 0.6)",
+  strokeColor = "rgba(16, 85, 201, 0.8)",
+  strokeWidth = 2,
+  zIndex = 50,
+  zoomLevel = 10,
+}) => {
+  if (!coordinates || coordinates.length < 3) {
+    return null;
+  }
+  const platform = usePlatform();
+  const markerRef = useRef<MapMarker>(null);
+
+  const centerPoint = getPolygonCenter(coordinates);
+
+  // Tính font size dựa trên zoom level
+  // Zoom càng thấp (xa ra) thì font size càng nhỏ
+  const calculateFontSize = (baseSize: number) => {
+    const baseZoom = 10;
+    // Giảm scale factor để text không quá to khi zoom out
+    const scaleFactor = Math.pow(2, (zoomLevel - baseZoom) * 0.3);
+    return Math.max(baseSize * scaleFactor, 5); // Tối thiểu 5px
+  };
+
+  const labelFontSize = calculateFontSize(12);
+  const contentFontSize = calculateFontSize(10);
+  // console.log("zoom level: ", zoomLevel);
+
+  const paddingScale = Math.max(Math.pow(2, (zoomLevel - 10) * 0.2), 0.5);
+  const minWidthScale = Math.max(Math.pow(2, (zoomLevel - 10) * 0.25), 0.9);
+  return (
+    <>
+      <Polygon
+        coordinates={coordinates}
+        fillColor={fillColor}
+        strokeColor={strokeColor}
+        strokeWidth={strokeWidth}
+        zIndex={zIndex}
+      />
+      {label && (
+        <Marker
+          ref={markerRef}
+          coordinate={centerPoint}
+          zIndex={50}
+          tracksViewChanges={platform === ANDROID_PLATFORM ? false : true}
+          anchor={{ x: 0.5, y: 0.5 }}
+          title={platform === ANDROID_PLATFORM ? label : undefined}
+          description={platform === ANDROID_PLATFORM ? content : undefined}
+        >
+          <View style={styles.markerContainer}>
+            <View
+              style={[
+                {
+                  paddingHorizontal: 5 * paddingScale,
+                  paddingVertical: 5 * paddingScale,
+                  minWidth: 80,
+                  maxWidth: 150 * minWidthScale,
+                },
+              ]}
+            >
+              <Text
+                style={[styles.labelText, { fontSize: labelFontSize }]}
+                numberOfLines={2}
+              >
+                {label}
+              </Text>
+              {content && (
+                <Text
+                  style={[
+                    styles.contentText,
+                    { fontSize: contentFontSize, marginTop: 2 * paddingScale },
+                  ]}
+                  numberOfLines={2}
+                >
+                  {content}
+                </Text>
+              )}
+            </View>
+          </View>
+        </Marker>
+      )}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  markerContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  labelContainer: {
+    backgroundColor: "rgba(16, 85, 201, 0.95)",
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 18,
+    borderWidth: 2,
+    borderColor: "#fff",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.4,
+    shadowRadius: 5,
+    elevation: 8,
+    minWidth: 80,
+    maxWidth: 250,
+  },
+  labelText: {
+    color: "#fff",
+    fontSize: 14,
+    fontWeight: "bold",
+    letterSpacing: 0.3,
+    textAlign: "center",
+  },
+  contentText: {
+    color: "#fff",
+    fontSize: 11,
+    fontWeight: "600",
+    letterSpacing: 0.2,
+    textAlign: "center",
+    opacity: 0.95,
+  },
+});

components/map/PolylineWithLabel.tsx

@@ -0,0 +1,112 @@
+import { ANDROID_PLATFORM } from "@/constants";
+import { usePlatform } from "@/hooks/use-platform";
+import {
+  calculateTotalDistance,
+  getMiddlePointOfPolyline,
+} from "@/utils/polyline";
+import React, { useRef } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { MapMarker, Marker, Polyline } from "react-native-maps";
+
+export interface PolylineWithLabelProps {
+  coordinates: {
+    latitude: number;
+    longitude: number;
+  }[];
+  label?: string;
+  content?: string;
+  strokeColor?: string;
+  strokeWidth?: number;
+  showDistance?: boolean;
+  zIndex?: number;
+}
+
+/**
+ * Component render Polyline kèm Label/Text ở giữa
+ */
+export const PolylineWithLabel: React.FC<PolylineWithLabelProps> = ({
+  coordinates,
+  label,
+  content,
+  strokeColor = "#FF5733",
+  strokeWidth = 4,
+  showDistance = false,
+  zIndex = 50,
+}) => {
+  if (!coordinates || coordinates.length < 2) {
+    return null;
+  }
+
+  const middlePoint = getMiddlePointOfPolyline(coordinates);
+  const distance = calculateTotalDistance(coordinates);
+  const platform = usePlatform();
+  const markerRef = useRef<MapMarker>(null);
+  let displayText = label || "";
+  if (showDistance) {
+    displayText += displayText
+      ? ` (${distance.toFixed(2)}km)`
+      : `${distance.toFixed(2)}km`;
+  }
+  return (
+    <>
+      <Polyline
+        coordinates={coordinates}
+        strokeColor={strokeColor}
+        strokeWidth={strokeWidth}
+        zIndex={zIndex}
+      />
+      {displayText && (
+        <Marker
+          ref={markerRef}
+          coordinate={middlePoint}
+          zIndex={zIndex + 10}
+          tracksViewChanges={platform === ANDROID_PLATFORM ? false : true}
+          anchor={{ x: 0.5, y: 0.5 }}
+          title={platform === ANDROID_PLATFORM ? label : undefined}
+          description={platform === ANDROID_PLATFORM ? content : undefined}
+        >
+          <View style={styles.markerContainer}>
+            <View style={styles.labelContainer}>
+              <Text
+                style={styles.labelText}
+                numberOfLines={2}
+                adjustsFontSizeToFit
+              >
+                {displayText}
+              </Text>
+            </View>
+          </View>
+        </Marker>
+      )}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  markerContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  labelContainer: {
+    backgroundColor: "rgba(255, 87, 51, 0.95)",
+    paddingHorizontal: 5,
+    paddingVertical: 5,
+    borderRadius: 18,
+    borderWidth: 1,
+    borderColor: "#fff",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.4,
+    shadowRadius: 5,
+    elevation: 8,
+    minWidth: 80,
+    maxWidth: 180,
+  },
+  labelText: {
+    color: "#fff",
+    fontSize: 14,
+    fontWeight: "bold",
+    letterSpacing: 0.3,
+    textAlign: "center",
+  },
+});

components/map/SosButton.tsx

@@ -0,0 +1,249 @@
+import {
+  queryDeleteSos,
+  queryGetSos,
+  querySendSosMessage,
+} from "@/controller/DeviceController";
+import { useI18n } from "@/hooks/use-i18n";
+import { showErrorToast } from "@/services/toast_service";
+import { sosMessage } from "@/utils/sosUtils";
+import { MaterialIcons } from "@expo/vector-icons";
+import { useEffect, useState } from "react";
+import { StyleSheet, Text, TextInput, View } from "react-native";
+import IconButton from "../IconButton";
+import Select from "../Select";
+import Modal from "../ui/modal";
+import { useThemeColor } from "@/hooks/use-theme-color";
+
+const SosButton = () => {
+  const [sosData, setSosData] = useState<Model.SosResponse | null>();
+  const [showConfirmSosDialog, setShowConfirmSosDialog] = useState(false);
+  const [selectedSosMessage, setSelectedSosMessage] = useState<number | null>(
+    null
+  );
+  const [customMessage, setCustomMessage] = useState("");
+  const [errors, setErrors] = useState<{ [key: string]: string }>({});
+  const { t } = useI18n();
+
+  // Theme colors
+  const textColor = useThemeColor({}, 'text');
+  const borderColor = useThemeColor({}, 'border');
+  const errorColor = useThemeColor({}, 'error');
+  const backgroundColor = useThemeColor({}, 'background');
+
+  // Dynamic styles
+  const styles = SosButtonStyles(textColor, borderColor, errorColor, backgroundColor);
+
+  const sosOptions = [
+    ...sosMessage.map((msg) => ({
+      ma: msg.ma,
+      moTa: msg.moTa,
+      label: msg.moTa,
+      value: msg.ma,
+    })),
+    { ma: 999, moTa: "Khác", label: "Khác", value: 999 },
+  ];
+
+  const getSosData = async () => {
+    try {
+      const response = await queryGetSos();
+      // console.log("SoS ResponseL: ", response);
+
+      setSosData(response.data);
+    } catch (error) {
+      console.error("Failed to fetch SOS data:", error);
+    }
+  };
+
+  useEffect(() => {
+    getSosData();
+  }, []);
+
+  const validateForm = () => {
+    const newErrors: { [key: string]: string } = {};
+
+    if (selectedSosMessage === 999 && customMessage.trim() === "") {
+      newErrors.customMessage = t("home.sos.statusRequired");
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleConfirmSos = async () => {
+    if (!validateForm()) {
+      console.log("Form chưa validate");
+      return; // Không đóng modal nếu validate fail
+    }
+
+    let messageToSend = "";
+    if (selectedSosMessage === 999) {
+      messageToSend = customMessage.trim();
+    } else {
+      const selectedOption = sosOptions.find(
+        (opt) => opt.ma === selectedSosMessage
+      );
+      messageToSend = selectedOption ? selectedOption.moTa : "";
+    }
+
+    // Gửi dữ liệu đi
+    await sendSosMessage(messageToSend);
+
+    // Đóng modal và reset form sau khi gửi thành công
+    setShowConfirmSosDialog(false);
+    setSelectedSosMessage(null);
+    setCustomMessage("");
+    setErrors({});
+  };
+
+  const handleClickButton = async (isActive: boolean) => {
+    console.log("Is Active: ", isActive);
+
+    if (isActive) {
+      const resp = await queryDeleteSos();
+      if (resp.status === 200) {
+        await getSosData();
+      }
+    } else {
+      setSelectedSosMessage(11); // Mặc định chọn lý do ma: 11
+      setShowConfirmSosDialog(true);
+    }
+  };
+
+  const sendSosMessage = async (message: string) => {
+    try {
+      const resp = await querySendSosMessage(message);
+      if (resp.status === 200) {
+        await getSosData();
+      }
+    } catch (error) {
+      console.error("Error when send sos: ", error);
+      showErrorToast(t("home.sos.sendError"));
+    }
+  };
+
+  return (
+    <>
+      <IconButton
+        icon={<MaterialIcons name="warning" size={20} color="white" />}
+        type="danger"
+        size="middle"
+        onPress={() => handleClickButton(sosData?.active || false)}
+        style={{ borderRadius: 20 }}
+      >
+        {sosData?.active ? t("home.sos.active") : t("home.sos.inactive")}
+      </IconButton>
+      <Modal
+        open={showConfirmSosDialog}
+        onCancel={() => {
+          setShowConfirmSosDialog(false);
+          setSelectedSosMessage(null);
+          setCustomMessage("");
+          setErrors({});
+        }}
+        okText={t("home.sos.confirm")}
+        cancelText={t("home.sos.cancel")}
+        title={t("home.sos.title")}
+        centered
+        onOk={handleConfirmSos}
+      >
+        {/* Select Nội dung SOS */}
+        <View style={styles.formGroup}>
+          <Text style={styles.label}>{t("home.sos.content")}</Text>
+
+          <Select
+            value={selectedSosMessage ?? undefined}
+            options={sosOptions}
+            placeholder={t("home.sos.selectReason")}
+            onChange={(value) => {
+              setSelectedSosMessage(value as number);
+              // Clear custom message nếu chọn khác lý do
+              if (value !== 999) {
+                setCustomMessage("");
+              }
+              // Clear error if exists
+              if (errors.sosMessage) {
+                setErrors((prev) => {
+                  const newErrors = { ...prev };
+                  delete newErrors.sosMessage;
+                  return newErrors;
+                });
+              }
+            }}
+            showSearch={false}
+            style={[errors.sosMessage ? styles.errorBorder : undefined]}
+          />
+          {errors.sosMessage && (
+            <Text style={styles.errorText}>{errors.sosMessage}</Text>
+          )}
+        </View>
+
+        {/* Input Custom Message nếu chọn "Khác" */}
+        {selectedSosMessage === 999 && (
+          <View style={styles.formGroup}>
+            <Text style={styles.label}>{t("home.sos.statusInput")}</Text>
+            <TextInput
+              style={[
+                styles.input,
+                errors.customMessage ? styles.errorInput : {},
+              ]}
+              placeholder={t("home.sos.enterStatus")}
+              placeholderTextColor={textColor + '99'} // Add transparency
+              value={customMessage}
+              onChangeText={(text) => {
+                setCustomMessage(text);
+                if (text.trim() !== "") {
+                  setErrors((prev) => {
+                    const newErrors = { ...prev };
+                    delete newErrors.customMessage;
+                    return newErrors;
+                  });
+                }
+              }}
+              multiline
+              numberOfLines={4}
+            />
+            {errors.customMessage && (
+              <Text style={styles.errorText}>{errors.customMessage}</Text>
+            )}
+          </View>
+        )}
+      </Modal>
+    </>
+  );
+};
+
+const SosButtonStyles = (textColor: string, borderColor: string, errorColor: string, backgroundColor: string) => StyleSheet.create({
+  formGroup: {
+    marginBottom: 16,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: "600",
+    marginBottom: 8,
+    color: textColor,
+  },
+  errorBorder: {
+    borderColor: errorColor,
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: borderColor,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+    fontSize: 14,
+    color: textColor,
+    backgroundColor: backgroundColor,
+    textAlignVertical: "top",
+  },
+  errorInput: {
+    borderColor: errorColor,
+  },
+  errorText: {
+    color: errorColor,
+    fontSize: 12,
+    marginTop: 4,
+  },
+});
+
+export default SosButton;

components/parallax-scroll-view.tsx

@@ -0,0 +1,79 @@
+import type { PropsWithChildren, ReactElement } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, {
+    interpolate,
+    useAnimatedRef,
+    useAnimatedStyle,
+    useScrollOffset,
+} from 'react-native-reanimated';
+
+import { ThemedView } from '@/components/themed-view';
+import { useThemeColor } from '@/hooks/use-theme-color';
+import { useColorScheme } from '@/hooks/use-theme-context';
+
+const HEADER_HEIGHT = 250;
+
+type Props = PropsWithChildren<{
+  headerImage: ReactElement;
+  headerBackgroundColor: { dark: string; light: string };
+}>;
+
+export default function ParallaxScrollView({
+  children,
+  headerImage,
+  headerBackgroundColor,
+}: Props) {
+  const backgroundColor = useThemeColor({}, 'background');
+  const colorScheme = useColorScheme();
+  const scrollRef = useAnimatedRef<Animated.ScrollView>();
+  const scrollOffset = useScrollOffset(scrollRef);
+  const headerAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateY: interpolate(
+            scrollOffset.value,
+            [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
+            [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75]
+          ),
+        },
+        {
+          scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]),
+        },
+      ],
+    };
+  });
+
+  return (
+    <Animated.ScrollView
+      ref={scrollRef}
+      style={{ backgroundColor, flex: 1 }}
+      scrollEventThrottle={16}>
+      <Animated.View
+        style={[
+          styles.header,
+          { backgroundColor: headerBackgroundColor[colorScheme] },
+          headerAnimatedStyle,
+        ]}>
+        {headerImage}
+      </Animated.View>
+      <ThemedView style={styles.content}>{children}</ThemedView>
+    </Animated.ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    height: HEADER_HEIGHT,
+    overflow: 'hidden',
+  },
+  content: {
+    flex: 1,
+    padding: 32,
+    gap: 16,
+    overflow: 'hidden',
+  },
+});

components/rotate-switch.tsx

@@ -0,0 +1,307 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  Animated,
+  Image,
+  ImageSourcePropType,
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from "react-native";
+
+const AnimatedImage = Animated.createAnimatedComponent(Image);
+
+const SIZE_PRESETS = {
+  sm: { width: 64, height: 32 },
+  md: { width: 80, height: 40 },
+  lg: { width: 96, height: 48 },
+} as const;
+
+type SwitchSize = keyof typeof SIZE_PRESETS;
+
+const DEFAULT_TOGGLE_DURATION = 400;
+const DEFAULT_OFF_IMAGE =
+  "https://images.vexels.com/media/users/3/163966/isolated/preview/6ecbb5ec8c121c0699c9b9179d6b24aa-england-flag-language-icon-circle.png";
+const DEFAULT_ON_IMAGE =
+  "https://cdn-icons-png.flaticon.com/512/197/197473.png";
+const DEFAULT_INACTIVE_BG = "#D3DAD9";
+const DEFAULT_ACTIVE_BG = "#C2E2FA";
+const PRESSED_SCALE = 0.96;
+const PRESS_FEEDBACK_DURATION = 120;
+
+type RotateSwitchProps = {
+  size?: SwitchSize;
+  onImage?: ImageSourcePropType | string;
+  offImage?: ImageSourcePropType | string;
+  initialValue?: boolean;
+  duration?: number;
+  activeBackgroundColor?: string;
+  inactiveBackgroundColor?: string;
+  style?: StyleProp<ViewStyle>;
+  onChange?: (value: boolean) => void;
+};
+
+const toImageSource = (
+  input: ImageSourcePropType | string | undefined,
+  fallbackUri: string
+): ImageSourcePropType => {
+  if (typeof input === "string") {
+    return { uri: input };
+  }
+
+  if (input) {
+    return input;
+  }
+
+  return { uri: fallbackUri };
+};
+
+const RotateSwitch = ({
+  size = "md",
+  onImage,
+  offImage,
+  duration,
+  activeBackgroundColor = DEFAULT_ACTIVE_BG,
+  inactiveBackgroundColor = DEFAULT_INACTIVE_BG,
+  initialValue = false,
+  style,
+  onChange,
+}: RotateSwitchProps) => {
+  const { width: containerWidth, height: containerHeight } =
+    SIZE_PRESETS[size] ?? SIZE_PRESETS.md;
+  const knobSize = containerHeight;
+  const knobTravel = containerWidth - knobSize;
+  const animationDuration = Math.max(duration ?? DEFAULT_TOGGLE_DURATION, 0);
+
+  const resolvedOffImage = useMemo(
+    () => toImageSource(offImage, DEFAULT_OFF_IMAGE),
+    [offImage]
+  );
+  const resolvedOnImage = useMemo(
+    () => toImageSource(onImage, DEFAULT_ON_IMAGE),
+    [onImage]
+  );
+
+  const [isOn, setIsOn] = useState(initialValue);
+  const [bgOn, setBgOn] = useState(initialValue);
+  const [displaySource, setDisplaySource] = useState<ImageSourcePropType>(
+    initialValue ? resolvedOnImage : resolvedOffImage
+  );
+
+  const progress = useRef(new Animated.Value(initialValue ? 1 : 0)).current;
+  const pressScale = useRef(new Animated.Value(1)).current;
+  const listenerIdRef = useRef<string | number | null>(null);
+
+  useEffect(() => {
+    setDisplaySource(bgOn ? resolvedOnImage : resolvedOffImage);
+  }, [bgOn, resolvedOffImage, resolvedOnImage]);
+
+  const removeProgressListener = () => {
+    if (listenerIdRef.current != null) {
+      progress.removeListener(listenerIdRef.current as string);
+      listenerIdRef.current = null;
+    }
+  };
+
+  const attachHalfwaySwapListener = (next: boolean) => {
+    removeProgressListener();
+    let swapped = false;
+    listenerIdRef.current = progress.addListener(({ value }) => {
+      if (swapped) return;
+      const crossedHalfway = next ? value >= 0.5 : value <= 0.5;
+      if (!crossedHalfway) return;
+      swapped = true;
+      setBgOn(next);
+      setDisplaySource(next ? resolvedOnImage : resolvedOffImage);
+      removeProgressListener();
+    });
+  };
+
+  // Clean up listener on unmount
+  useEffect(() => {
+    return () => {
+      removeProgressListener();
+    };
+  }, []);
+
+  // Keep internal state in sync when `initialValue` prop changes.
+  // Users may pass a changing `initialValue` (like from parent state) and
+  // expect the switch to reflect that. Animate `progress` toward the
+  // corresponding value and update images/background when done.
+  useEffect(() => {
+    // If no change, do nothing
+    if (initialValue === isOn) return;
+
+    const next = initialValue;
+    const targetValue = next ? 1 : 0;
+
+    progress.stopAnimation();
+    removeProgressListener();
+
+    if (animationDuration <= 0) {
+      progress.setValue(targetValue);
+      setIsOn(next);
+      setBgOn(next);
+      setDisplaySource(next ? resolvedOnImage : resolvedOffImage);
+      return;
+    }
+
+    // Update isOn immediately so accessibilityState etc. reflect change.
+    setIsOn(next);
+
+    attachHalfwaySwapListener(next);
+
+    Animated.timing(progress, {
+      toValue: targetValue,
+      duration: animationDuration,
+      useNativeDriver: true,
+    }).start(() => {
+      // Ensure final state reflects the target in case animation skips halfway listener.
+      setBgOn(next);
+      setDisplaySource(next ? resolvedOnImage : resolvedOffImage);
+    });
+  }, [
+    initialValue,
+    isOn,
+    animationDuration,
+    progress,
+    resolvedOffImage,
+    resolvedOnImage,
+  ]);
+
+  const knobTranslateX = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, knobTravel],
+  });
+
+  const knobRotation = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "180deg"],
+  });
+
+  const animatePress = (toValue: number) => {
+    Animated.timing(pressScale, {
+      toValue,
+      duration: PRESS_FEEDBACK_DURATION,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const handlePressIn = () => {
+    animatePress(PRESSED_SCALE);
+  };
+
+  const handlePressOut = () => {
+    animatePress(1);
+  };
+
+  const handleToggle = () => {
+    const next = !isOn;
+    const targetValue = next ? 1 : 0;
+
+    progress.stopAnimation();
+    removeProgressListener();
+
+    if (animationDuration <= 0) {
+      progress.setValue(targetValue);
+      setIsOn(next);
+      setBgOn(next);
+      onChange?.(next);
+      return;
+    }
+
+    setIsOn(next);
+
+    attachHalfwaySwapListener(next);
+
+    Animated.timing(progress, {
+      toValue: targetValue,
+      duration: animationDuration,
+      useNativeDriver: true,
+    }).start(() => {
+      setBgOn(next);
+      onChange?.(next);
+    });
+  };
+
+  return (
+    <Pressable
+      onPress={handleToggle}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      accessibilityRole="switch"
+      accessibilityState={{ checked: isOn }}
+      style={[styles.pressable, style]}
+    >
+      <Animated.View
+        style={[
+          styles.shadowWrapper,
+          {
+            transform: [{ scale: pressScale }],
+            width: containerWidth,
+            height: containerHeight,
+            borderRadius: containerHeight / 2,
+          },
+        ]}
+      >
+        <View
+          style={[
+            styles.container,
+            {
+              borderRadius: containerHeight / 2,
+              backgroundColor: bgOn
+                ? activeBackgroundColor
+                : inactiveBackgroundColor,
+            },
+          ]}
+        >
+          <AnimatedImage
+            source={displaySource}
+            style={[
+              styles.knob,
+              {
+                width: knobSize,
+                height: knobSize,
+                borderRadius: knobSize / 2,
+                transform: [
+                  { translateX: knobTranslateX },
+                  { rotate: knobRotation },
+                ],
+              },
+            ]}
+          />
+        </View>
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  pressable: {
+    alignSelf: "flex-start",
+  },
+  shadowWrapper: {
+    justifyContent: "center",
+    position: "relative",
+    shadowColor: "#000",
+    shadowOpacity: 0.15,
+    shadowOffset: { width: 0, height: 4 },
+    shadowRadius: 6,
+    elevation: 6,
+    backgroundColor: "transparent",
+  },
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    position: "relative",
+    overflow: "hidden",
+  },
+  knob: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+  },
+});
+
+export default RotateSwitch;

components/theme-example.tsx

@@ -0,0 +1,154 @@
+/**
+ * Example component demonstrating theme usage
+ * Shows different ways to use the theme system
+ */
+
+import React from "react";
+import { View, Text, TouchableOpacity, ScrollView } from "react-native";
+import { ThemedText } from "@/components/themed-text";
+import { ThemedView } from "@/components/themed-view";
+import { useAppTheme } from "@/hooks/use-app-theme";
+import { useThemeColor } from "@/hooks/use-theme-color";
+
+export function ThemeExampleComponent() {
+  const { colors, styles, utils } = useAppTheme();
+
+  // Example of using useThemeColor hook
+  const customTextColor = useThemeColor({}, "textSecondary");
+  const customBackgroundColor = useThemeColor({}, "surfaceSecondary");
+
+  return (
+    <ScrollView style={styles.container}>
+      <ThemedView style={styles.surface}>
+        <ThemedText type="title">Theme Examples</ThemedText>
+
+        {/* Using themed components */}
+        <ThemedText type="subtitle">Themed Components</ThemedText>
+        <ThemedView style={styles.card}>
+          <ThemedText>This is a themed text</ThemedText>
+          <ThemedText type="defaultSemiBold">
+            This is bold themed text
+          </ThemedText>
+        </ThemedView>
+
+        {/* Using theme colors directly */}
+        <ThemedText type="subtitle">Direct Color Usage</ThemedText>
+        <View
+          style={[styles.card, { borderColor: colors.primary, borderWidth: 2 }]}
+        >
+          <Text style={{ color: colors.text, fontSize: 16 }}>
+            Using colors.text directly
+          </Text>
+          <Text
+            style={{ color: colors.primary, fontSize: 14, fontWeight: "600" }}
+          >
+            Primary color text
+          </Text>
+        </View>
+
+        {/* Using pre-styled components */}
+        <ThemedText type="subtitle">Pre-styled Components</ThemedText>
+        <View style={styles.card}>
+          <TouchableOpacity style={styles.primaryButton}>
+            <Text style={styles.primaryButtonText}>Primary Button</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity style={styles.secondaryButton}>
+            <Text style={styles.secondaryButtonText}>Secondary Button</Text>
+          </TouchableOpacity>
+        </View>
+
+        {/* Status containers */}
+        <ThemedText type="subtitle">Status Indicators</ThemedText>
+        <View style={styles.card}>
+          <View style={styles.successContainer}>
+            <Text style={{ color: colors.success, fontWeight: "600" }}>
+              Success Message
+            </Text>
+          </View>
+
+          <View style={styles.warningContainer}>
+            <Text style={{ color: colors.warning, fontWeight: "600" }}>
+              Warning Message
+            </Text>
+          </View>
+
+          <View style={styles.errorContainer}>
+            <Text style={{ color: colors.error, fontWeight: "600" }}>
+              Error Message
+            </Text>
+          </View>
+        </View>
+
+        {/* Using opacity colors */}
+        <ThemedText type="subtitle">Opacity Colors</ThemedText>
+        <View style={styles.card}>
+          <View
+            style={[
+              styles.surface,
+              { backgroundColor: utils.getOpacityColor("primary", 0.1) },
+            ]}
+          >
+            <Text style={{ color: colors.primary }}>
+              Primary with 10% opacity background
+            </Text>
+          </View>
+
+          <View
+            style={[
+              styles.surface,
+              { backgroundColor: utils.getOpacityColor("error", 0.2) },
+            ]}
+          >
+            <Text style={{ color: colors.error }}>
+              Error with 20% opacity background
+            </Text>
+          </View>
+        </View>
+
+        {/* Theme utilities */}
+        <ThemedText type="subtitle">Theme Utilities</ThemedText>
+        <View style={styles.card}>
+          <Text style={{ color: colors.text }}>
+            Is Dark Mode: {utils.isDark ? "Yes" : "No"}
+          </Text>
+          <Text style={{ color: colors.text }}>
+            Is Light Mode: {utils.isLight ? "Yes" : "No"}
+          </Text>
+
+          <TouchableOpacity
+            style={[styles.primaryButton, { marginTop: 10 }]}
+            onPress={utils.toggleTheme}
+          >
+            <Text style={styles.primaryButtonText}>
+              Toggle Theme (Light/Dark)
+            </Text>
+          </TouchableOpacity>
+        </View>
+
+        {/* Custom themed component example */}
+        <ThemedText type="subtitle">Custom Component</ThemedText>
+        <View
+          style={[
+            styles.card,
+            {
+              backgroundColor: customBackgroundColor,
+              borderColor: colors.border,
+              borderWidth: 1,
+            },
+          ]}
+        >
+          <Text
+            style={{
+              color: customTextColor,
+              fontSize: 16,
+              textAlign: "center",
+            }}
+          >
+            Custom component using useThemeColor
+          </Text>
+        </View>
+      </ThemedView>
+    </ScrollView>
+  );
+}

components/theme-toggle.tsx

@@ -0,0 +1,109 @@
+/**
+ * Theme Toggle Component for switching between light, dark, and system themes
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { ThemedText } from "@/components/themed-text";
+import { useThemeContext } from "@/hooks/use-theme-context";
+import { useI18n } from "@/hooks/use-i18n";
+import { Ionicons } from "@expo/vector-icons";
+
+interface ThemeToggleProps {
+  style?: any;
+}
+
+export function ThemeToggle({ style }: ThemeToggleProps) {
+  const { themeMode, setThemeMode, colors } = useThemeContext();
+  const { t } = useI18n();
+
+  const themeOptions = [
+    {
+      mode: "light" as const,
+      label: t("common.theme_light"),
+      icon: "sunny-outline" as const,
+    },
+    {
+      mode: "dark" as const,
+      label: t("common.theme_dark"),
+      icon: "moon-outline" as const,
+    },
+    {
+      mode: "system" as const,
+      label: t("common.theme_system"),
+      icon: "phone-portrait-outline" as const,
+    },
+  ];
+
+  return (
+    <View
+      style={[styles.container, style, { backgroundColor: colors.surface }]}
+    >
+      <ThemedText style={styles.title}>{t("common.theme")}</ThemedText>
+      <View style={styles.optionsContainer}>
+        {themeOptions.map((option) => (
+          <TouchableOpacity
+            key={option.mode}
+            style={[
+              styles.option,
+              {
+                backgroundColor:
+                  themeMode === option.mode
+                    ? colors.primary
+                    : colors.backgroundSecondary,
+                borderColor: colors.border,
+              },
+            ]}
+            onPress={() => setThemeMode(option.mode)}
+          >
+            <Ionicons
+              name={option.icon}
+              size={20}
+              color={themeMode === option.mode ? "#fff" : colors.icon}
+            />
+            <ThemedText
+              style={[
+                styles.optionText,
+                { color: themeMode === option.mode ? "#fff" : colors.text },
+              ]}
+            >
+              {option.label}
+            </ThemedText>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    borderRadius: 12,
+    marginVertical: 8,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: "600",
+    marginBottom: 12,
+  },
+  optionsContainer: {
+    flexDirection: "row",
+    gap: 8,
+  },
+  option: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 8,
+    borderRadius: 8,
+    borderWidth: 1,
+    gap: 6,
+  },
+  optionText: {
+    fontSize: 14,
+    fontWeight: "500",
+  },
+});

components/themed-text.tsx

@@ -0,0 +1,63 @@
+import { StyleSheet, Text, type TextProps } from "react-native";
+
+import { useThemeColor } from "@/hooks/use-theme-color";
+
+export type ThemedTextProps = TextProps & {
+  lightColor?: string;
+  darkColor?: string;
+  type?: "default" | "title" | "defaultSemiBold" | "subtitle" | "link";
+  className?: string;
+};
+
+export function ThemedText({
+  style,
+  className = "",
+  lightColor,
+  darkColor,
+  type = "default",
+  ...rest
+}: ThemedTextProps) {
+  const color = useThemeColor({ light: lightColor, dark: darkColor }, "text");
+
+  return (
+    <Text
+      className={className}
+      style={[
+        { color },
+        type === "default" ? styles.default : undefined,
+        type === "title" ? styles.title : undefined,
+        type === "defaultSemiBold" ? styles.defaultSemiBold : undefined,
+        type === "subtitle" ? styles.subtitle : undefined,
+        type === "link" ? styles.link : undefined,
+        style,
+      ]}
+      {...rest}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  default: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  defaultSemiBold: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: "600",
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: "bold",
+    lineHeight: 32,
+  },
+  subtitle: {
+    fontSize: 20,
+    fontWeight: "bold",
+  },
+  link: {
+    lineHeight: 30,
+    fontSize: 16,
+    color: "#0a7ea4",
+  },
+});

components/themed-view.tsx

@@ -0,0 +1,30 @@
+import { View, type ViewProps } from "react-native";
+
+import { useThemeColor } from "@/hooks/use-theme-color";
+
+export type ThemedViewProps = ViewProps & {
+  lightColor?: string;
+  darkColor?: string;
+  className?: string;
+};
+
+export function ThemedView({
+  style,
+  className = "",
+  lightColor,
+  darkColor,
+  ...otherProps
+}: ThemedViewProps) {
+  const backgroundColor = useThemeColor(
+    { light: lightColor, dark: darkColor },
+    "background"
+  );
+
+  return (
+    <View
+      className={className}
+      style={[{ backgroundColor }, style]}
+      {...otherProps}
+    />
+  );
+}

components/tripInfo/CrewListTable.tsx

@@ -0,0 +1,166 @@
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { useI18n } from "@/hooks/use-i18n";
+import { useTrip } from "@/state/use-trip";
+import React, { useMemo, useRef, useState } from "react";
+import { Animated, Text, TouchableOpacity, View } from "react-native";
+import CrewDetailModal from "./modal/CrewDetailModal";
+import { useAppTheme } from "@/hooks/use-app-theme";
+import { useThemeContext } from "@/hooks/use-theme-context";
+import { createTableStyles } from "./ThemedTable";
+
+const CrewListTable: React.FC = () => {
+  const [collapsed, setCollapsed] = useState(true);
+  const [contentHeight, setContentHeight] = useState<number>(0);
+  const animatedHeight = useRef(new Animated.Value(0)).current;
+  const [modalVisible, setModalVisible] = useState(false);
+  const [selectedCrew, setSelectedCrew] = useState<Model.TripCrews | null>(
+    null
+  );
+  const { t } = useI18n();
+  const { colorScheme } = useAppTheme();
+  const { colors } = useThemeContext();
+  const styles = useMemo(() => createTableStyles(colorScheme), [colorScheme]);
+
+  const { trip } = useTrip();
+
+  const data: Model.TripCrews[] = trip?.crews ?? [];
+
+  const tongThanhVien = data.length;
+
+  const handleToggle = () => {
+    const toValue = collapsed ? contentHeight : 0;
+    Animated.timing(animatedHeight, {
+      toValue,
+      duration: 300,
+      useNativeDriver: false,
+    }).start();
+    setCollapsed((prev) => !prev);
+  };
+
+  const handleCrewPress = (crewId: string) => {
+    const crew = data.find((item) => item.Person.personal_id === crewId);
+    if (crew) {
+      setSelectedCrew(crew);
+      setModalVisible(true);
+    }
+  };
+
+  const handleCloseModal = () => {
+    setModalVisible(false);
+    setSelectedCrew(null);
+  };
+
+  return (
+    <View style={styles.container}>
+      {/* Header toggle */}
+      <TouchableOpacity
+        activeOpacity={0.7}
+        onPress={handleToggle}
+        style={styles.headerRow}
+      >
+        <Text style={styles.title}>{t("trip.crewList.title")}</Text>
+        {collapsed && (
+          <Text style={styles.totalCollapsed}>{tongThanhVien}</Text>
+        )}
+        <IconSymbol
+          name={collapsed ? "chevron.down" : "chevron.up"}
+          size={16}
+          color={colors.icon}
+        />
+      </TouchableOpacity>
+
+      {/* Nội dung ẩn để đo chiều cao */}
+      <View
+        style={{ position: "absolute", opacity: 0, zIndex: -1000 }}
+        onLayout={(event) => {
+          const height = event.nativeEvent.layout.height;
+          if (height > 0 && contentHeight === 0) {
+            setContentHeight(height);
+          }
+        }}
+      >
+        {/* Header */}
+        <View style={[styles.row, styles.tableHeader]}>
+          <View style={styles.cellWrapper}>
+            <Text style={[styles.cell, styles.headerText]}>
+              {t("trip.crewList.nameHeader")}
+            </Text>
+          </View>
+          <Text style={[styles.cell, styles.right, styles.headerText]}>
+            {t("trip.crewList.roleHeader")}
+          </Text>
+        </View>
+
+        {/* Body */}
+        {data.map((item) => (
+          <View key={item.Person.personal_id} style={styles.row}>
+            <TouchableOpacity
+              style={styles.cellWrapper}
+              onPress={() => handleCrewPress(item.Person.personal_id)}
+            >
+              <Text style={[styles.cell, styles.linkText]}>
+                {item.Person.name}
+              </Text>
+            </TouchableOpacity>
+            <Text style={[styles.cell, styles.right]}>{item.role}</Text>
+          </View>
+        ))}
+
+        {/* Footer */}
+        <View style={[styles.row]}>
+          <Text style={[styles.cell, styles.footerText]}>
+            {t("trip.crewList.totalLabel")}
+          </Text>
+          <Text style={[styles.cell, styles.footerTotal]}>{tongThanhVien}</Text>
+        </View>
+      </View>
+
+      {/* Bảng hiển thị với animation */}
+      <Animated.View style={{ height: animatedHeight, overflow: "hidden" }}>
+        {/* Header */}
+        <View style={[styles.row, styles.tableHeader]}>
+          <View style={styles.cellWrapper}>
+            <Text style={[styles.cell, styles.headerText]}>
+              {t("trip.crewList.nameHeader")}
+            </Text>
+          </View>
+          <Text style={[styles.cell, styles.right, styles.headerText]}>
+            {t("trip.crewList.roleHeader")}
+          </Text>
+        </View>
+
+        {/* Body */}
+        {data.map((item) => (
+          <View key={item.Person.personal_id} style={styles.row}>
+            <TouchableOpacity
+              style={styles.cellWrapper}
+              onPress={() => handleCrewPress(item.Person.personal_id)}
+            >
+              <Text style={[styles.cell, styles.linkText]}>
+                {item.Person.name}
+              </Text>
+            </TouchableOpacity>
+            <Text style={[styles.cell, styles.right]}>{item.role}</Text>
+          </View>
+        ))}
+
+        {/* Footer */}
+        <View style={[styles.row]}>
+          <Text style={[styles.cell, styles.footerText]}>
+            {t("trip.crewList.totalLabel")}
+          </Text>
+          <Text style={[styles.cell, styles.footerTotal]}>{tongThanhVien}</Text>
+        </View>
+      </Animated.View>
+
+      {/* Modal chi tiết thuyền viên */}
+      <CrewDetailModal
+        visible={modalVisible}
+        onClose={handleCloseModal}
+        crewData={selectedCrew}
+      />
+    </View>
+  );
+};
+
+export default CrewListTable;

components/tripInfo/FishingToolsList.tsx

@@ -0,0 +1,123 @@
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { useI18n } from "@/hooks/use-i18n";
+import { useTrip } from "@/state/use-trip";
+import React, { useMemo, useRef, useState } from "react";
+import { Animated, Text, TouchableOpacity, View } from "react-native";
+import { useAppTheme } from "@/hooks/use-app-theme";
+import { useThemeContext } from "@/hooks/use-theme-context";
+import { createTableStyles } from "./ThemedTable";
+
+const FishingToolsTable: React.FC = () => {
+  const [collapsed, setCollapsed] = useState(true);
+  const [contentHeight, setContentHeight] = useState<number>(0);
+  const animatedHeight = useRef(new Animated.Value(0)).current;
+  const { t } = useI18n();
+  const { colorScheme } = useAppTheme();
+  const { colors } = useThemeContext();
+  const styles = useMemo(() => createTableStyles(colorScheme), [colorScheme]);
+
+  const { trip } = useTrip();
+  const data: Model.FishingGear[] = trip?.fishing_gears ?? [];
+  const tongSoLuong = data.reduce((sum, item) => sum + Number(item.number), 0);
+
+  const handleToggle = () => {
+    const toValue = collapsed ? contentHeight : 0;
+    Animated.timing(animatedHeight, {
+      toValue,
+      duration: 300,
+      useNativeDriver: false,
+    }).start();
+    setCollapsed((prev) => !prev);
+  };
+
+  return (
+    <View style={styles.container}>
+      {/* Header / Toggle */}
+      <TouchableOpacity
+        activeOpacity={0.7}
+        onPress={handleToggle}
+        style={styles.headerRow}
+      >
+        <Text style={styles.title}>{t("trip.fishingTools.title")}</Text>
+        {collapsed && <Text style={styles.totalCollapsed}>{tongSoLuong}</Text>}
+        <IconSymbol
+          name={collapsed ? "chevron.down" : "chevron.up"}
+          size={16}
+          color={colors.icon}
+        />
+      </TouchableOpacity>
+
+      {/* Nội dung ẩn để đo chiều cao */}
+      <View
+        style={{ position: "absolute", opacity: 0, zIndex: -1000 }}
+        onLayout={(event) => {
+          const height = event.nativeEvent.layout.height;
+          if (height > 0 && contentHeight === 0) {
+            setContentHeight(height);
+          }
+        }}
+      >
+        {/* Table Header */}
+        <View style={[styles.row, styles.tableHeader]}>
+          <Text style={[styles.cell, styles.left, styles.headerText]}>
+            {t("trip.fishingTools.nameHeader")}
+          </Text>
+          <Text style={[styles.cell, styles.right, styles.headerText]}>
+            {t("trip.fishingTools.quantityHeader")}
+          </Text>
+        </View>
+
+        {/* Body */}
+        {data.map((item, index) => (
+          <View key={index} style={styles.row}>
+            <Text style={[styles.cell, styles.left]}>{item.name}</Text>
+            <Text style={[styles.cell, styles.right]}>{item.number}</Text>
+          </View>
+        ))}
+
+        {/* Footer */}
+        <View style={[styles.row]}>
+          <Text style={[styles.cell, styles.left, styles.footerText]}>
+            {t("trip.fishingTools.totalLabel")}
+          </Text>
+          <Text style={[styles.cell, styles.right, styles.footerTotal]}>
+            {tongSoLuong}
+          </Text>
+        </View>
+      </View>
+
+      {/* Nội dung mở/đóng */}
+      <Animated.View style={{ height: animatedHeight, overflow: "hidden" }}>
+        {/* Table Header */}
+        <View style={[styles.row, styles.tableHeader]}>
+          <Text style={[styles.cell, styles.left, styles.headerText]}>
+            {t("trip.fishingTools.nameHeader")}
+          </Text>
+          <Text style={[styles.cell, styles.right, styles.headerText]}>
+            {t("trip.fishingTools.quantityHeader")}
+          </Text>
+        </View>
+
+        {/* Body */}
+        {data.map((item, index) => (
+          <View key={index} style={styles.row}>
+            <Text style={[styles.cell, styles.left]}>{item.name}</Text>
+            <Text style={[styles.cell, styles.right]}>{item.number}</Text>
+          </View>
+        ))}
+
+        {/* Footer */}
+        <View style={[styles.row]}>
+          <Text style={[styles.cell, styles.left, styles.footerText]}>
+            {t("trip.fishingTools.totalLabel")}
+          </Text>
+          <Text style={[styles.cell, styles.right, styles.footerTotal]}>
+            {tongSoLuong}
+          </Text>
+        </View>
+      </Animated.View>
+    </View>
+  );
+};
+
+export default FishingToolsTable;

components/tripInfo/NetListTable.tsx

@@ -0,0 +1,197 @@
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { useI18n } from "@/hooks/use-i18n";
+import { useFishes } from "@/state/use-fish";
+import { useTrip } from "@/state/use-trip";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Animated, Text, TouchableOpacity, View } from "react-native";
+import CreateOrUpdateHaulModal from "./modal/CreateOrUpdateHaulModal";
+import { useAppTheme } from "@/hooks/use-app-theme";
+import { useThemeContext } from "@/hooks/use-theme-context";
+import { createTableStyles } from "./ThemedTable";
+
+const NetListTable: React.FC = () => {
+  const [collapsed, setCollapsed] = useState(true);
+  const [contentHeight, setContentHeight] = useState<number>(0);
+  const animatedHeight = useRef(new Animated.Value(0)).current;
+  const [modalVisible, setModalVisible] = useState(false);
+  const [selectedNet, setSelectedNet] = useState<Model.FishingLog | null>(null);
+  const { t } = useI18n();
+  const { colorScheme } = useAppTheme();
+  const { colors } = useThemeContext();
+  const styles = useMemo(() => createTableStyles(colorScheme), [colorScheme]);
+
+  const { trip } = useTrip();
+  const { fishSpecies, getFishSpecies } = useFishes();
+  useEffect(() => {
+    getFishSpecies();
+  }, []);
+
+  const handleToggle = () => {
+    const toValue = collapsed ? contentHeight : 0;
+    Animated.timing(animatedHeight, {
+      toValue,
+      duration: 300,
+      useNativeDriver: false,
+    }).start();
+    setCollapsed((prev) => !prev);
+  };
+
+  const handleStatusPress = (id: string) => {
+    const net = trip?.fishing_logs?.find((item) => item.fishing_log_id === id);
+    if (net) {
+      setSelectedNet(net);
+      setModalVisible(true);
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      {/* Header toggle */}
+      <TouchableOpacity
+        activeOpacity={0.7}
+        onPress={handleToggle}
+        style={styles.headerRow}
+      >
+        <Text style={styles.title}>{t("trip.netList.title")}</Text>
+        {collapsed && (
+          <Text style={styles.totalCollapsed}>
+            {trip?.fishing_logs?.length}
+          </Text>
+        )}
+        <IconSymbol
+          name={collapsed ? "chevron.down" : "chevron.up"}
+          size={16}
+          color={colors.icon}
+        />
+      </TouchableOpacity>
+
+      {/* Nội dung ẩn để đo chiều cao */}
+      <View
+        style={{ position: "absolute", opacity: 0, zIndex: -1000 }}
+        onLayout={(event) => {
+          const height = event.nativeEvent.layout.height;
+          // Update measured content height whenever it actually changes.
+          if (height > 0 && height !== contentHeight) {
+            setContentHeight(height);
+            // If the panel is currently expanded, animate to the new height so
+            // newly added/removed rows become visible immediately.
+            if (!collapsed) {
+              Animated.timing(animatedHeight, {
+                toValue: height,
+                duration: 200,
+                useNativeDriver: false,
+              }).start();
+            }
+          }
+        }}
+      >
+        {/* Header */}
+        <View style={[styles.row, styles.tableHeader]}>
+          <Text style={[styles.sttCell, styles.headerText]}>
+            {t("trip.netList.sttHeader")}
+          </Text>
+          <Text style={[styles.cell, styles.headerText]}>
+            {t("trip.netList.statusHeader")}
+          </Text>
+        </View>
+
+        {/* Body */}
+        {trip?.fishing_logs?.map((item, index) => (
+          <View key={item.fishing_log_id} style={styles.row}>
+            {/* Cột STT */}
+            <Text style={styles.sttCell}>
+              {t("trip.netList.haulPrefix")} {index + 1}
+            </Text>
+
+            {/* Cột Trạng thái */}
+            <View style={[styles.cell, styles.statusContainer]}>
+              <View
+                style={[
+                  styles.statusDot,
+                  { backgroundColor: item.status ? "#2ecc71" : "#FFD600" },
+                ]}
+              />
+              <TouchableOpacity
+                onPress={() => handleStatusPress(item.fishing_log_id)}
+              >
+                <Text style={styles.statusText}>
+                  {item.status
+                    ? t("trip.netList.completed")
+                    : t("trip.netList.pending")}
+                </Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        ))}
+      </View>
+
+      {/* Bảng hiển thị với animation */}
+      <Animated.View style={{ height: animatedHeight, overflow: "hidden" }}>
+        {/* Header */}
+        <View style={[styles.row, styles.tableHeader]}>
+          <Text style={[styles.sttCell, styles.headerText]}>
+            {t("trip.netList.sttHeader")}
+          </Text>
+          <Text style={[styles.cell, styles.headerText]}>
+            {t("trip.netList.statusHeader")}
+          </Text>
+        </View>
+
+        {/* Body */}
+        {trip?.fishing_logs?.map((item, index) => (
+          <View key={item.fishing_log_id} style={styles.row}>
+            {/* Cột STT */}
+            <Text style={styles.sttCell}>
+              {t("trip.netList.haulPrefix")} {index + 1}
+            </Text>
+
+            {/* Cột Trạng thái */}
+            <View style={[styles.cell, styles.statusContainer]}>
+              <View
+                style={[
+                  styles.statusDot,
+                  { backgroundColor: item.status ? "#2ecc71" : "#FFD600" },
+                ]}
+              />
+              <TouchableOpacity
+                onPress={() => handleStatusPress(item.fishing_log_id)}
+              >
+                <Text style={styles.statusText}>
+                  {item.status
+                    ? t("trip.netList.completed")
+                    : t("trip.netList.pending")}
+                </Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        ))}
+      </Animated.View>
+      <CreateOrUpdateHaulModal
+        isVisible={modalVisible}
+        onClose={() => {
+          console.log("OnCLose");
+          setModalVisible(false);
+        }}
+        fishingLog={selectedNet}
+        fishingLogIndex={
+          selectedNet
+            ? trip!.fishing_logs!.findIndex(
+                (item) => item.fishing_log_id === selectedNet.fishing_log_id
+              ) + 1
+            : undefined
+        }
+      />
+      {/* Modal chi tiết */}
+      {/* <NetDetailModal
+        visible={modalVisible}
+        onClose={() => {
+          console.log("OnCLose");
+          setModalVisible(false);
+        }}
+        netData={selectedNet}
+      /> */}
+    </View>
+  );
+};
+
+export default NetListTable;

components/tripInfo/ThemedTable.tsx

@@ -0,0 +1,29 @@
+/**
+ * Wrapper component to easily apply theme-aware table styles
+ */
+
+import React, { useMemo } from "react";
+import { View, ViewProps } from "react-native";
+import { useAppTheme } from "@/hooks/use-app-theme";
+import { createTableStyles } from "./style/createTableStyles";
+
+interface ThemedTableProps extends ViewProps {
+  children: React.ReactNode;
+}
+
+export function ThemedTable({ style, children, ...props }: ThemedTableProps) {
+  const { colorScheme } = useAppTheme();
+  const tableStyles = useMemo(
+    () => createTableStyles(colorScheme),
+    [colorScheme]
+  );
+
+  return (
+    <View style={[tableStyles.container, style]} {...props}>
+      {children}
+    </View>
+  );
+}
+
+export { createTableStyles };
+export type { TableStyles } from "./style/createTableStyles";

components/tripInfo/TripCostTable.tsx

@@ -0,0 +1,177 @@
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { useI18n } from "@/hooks/use-i18n";
+import { useAppTheme } from "@/hooks/use-app-theme";
+import { useTrip } from "@/state/use-trip";
+import { createTableStyles } from "./style/createTableStyles";
+import TripCostDetailModal from "./modal/TripCostDetailModal";
+import React, { useRef, useState, useMemo } from "react";
+import { Animated, Text, TouchableOpacity, View } from "react-native";
+import { useThemeContext } from "@/hooks/use-theme-context";
+
+const TripCostTable: React.FC = () => {
+  const [collapsed, setCollapsed] = useState(true);
+  const [contentHeight, setContentHeight] = useState<number>(0);
+  const [modalVisible, setModalVisible] = useState(false);
+  const animatedHeight = useRef(new Animated.Value(0)).current;
+  const { t } = useI18n();
+  const { colorScheme } = useAppTheme();
+  const { colors } = useThemeContext();
+
+  const { trip } = useTrip();
+
+  const styles = useMemo(() => createTableStyles(colorScheme), [colorScheme]);
+
+  const data: Model.TripCost[] = trip?.trip_cost ?? [];
+  const tongCong = data.reduce((sum, item) => sum + item.total_cost, 0);
+
+  const handleToggle = () => {
+    const toValue = collapsed ? contentHeight : 0;
+    Animated.timing(animatedHeight, {
+      toValue,
+      duration: 300,
+      useNativeDriver: false,
+    }).start();
+    setCollapsed((prev) => !prev);
+  };
+
+  const handleViewDetail = () => {
+    setModalVisible(true);
+  };
+
+  const handleCloseModal = () => {
+    setModalVisible(false);
+  };
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity
+        activeOpacity={0.7}
+        onPress={handleToggle}
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          //   marginBottom: 12,
+        }}
+      >
+        <Text style={styles.title}>{t("trip.costTable.title")}</Text>
+        {collapsed && (
+          <Text style={[styles.totalCollapsed]}>
+            {tongCong.toLocaleString()}
+          </Text>
+        )}
+        <IconSymbol
+          name={collapsed ? "chevron.down" : "chevron.up"}
+          size={15}
+          color={colors.icon}
+        />
+      </TouchableOpacity>
+
+      {/* Nội dung ẩn để đo chiều cao */}
+      <View
+        style={{ position: "absolute", opacity: 0, zIndex: -1000 }}
+        onLayout={(event) => {
+          const height = event.nativeEvent.layout.height;
+          if (height > 0 && contentHeight === 0) {
+            setContentHeight(height);
+          }
+        }}
+      >
+        {/* Header */}
+        <View style={[styles.row, styles.header]}>
+          <Text style={[styles.cell, styles.left, styles.headerText]}>
+            {t("trip.costTable.typeHeader")}
+          </Text>
+          <Text style={[styles.cell, styles.headerText]}>
+            {t("trip.costTable.totalCostHeader")}
+          </Text>
+        </View>
+
+        {/* Body */}
+        {data.map((item, index) => (
+          <View key={index} style={styles.row}>
+            <Text style={[styles.cell, styles.left]}>{item.type}</Text>
+            <Text style={[styles.cell, styles.right]}>
+              {item.total_cost.toLocaleString()}
+            </Text>
+          </View>
+        ))}
+
+        {/* Footer */}
+        <View style={[styles.row]}>
+          <Text style={[styles.cell, styles.left, styles.footerText]}>
+            {t("trip.costTable.totalLabel")}
+          </Text>
+          <Text style={[styles.cell, styles.total]}>
+            {tongCong.toLocaleString()}
+          </Text>
+        </View>
+
+        {/* View Detail Button */}
+        {data.length > 0 && (
+          <TouchableOpacity
+            style={styles.viewDetailButton}
+            onPress={handleViewDetail}
+          >
+            <Text style={styles.viewDetailText}>
+              {t("trip.costTable.viewDetail")}
+            </Text>
+          </TouchableOpacity>
+        )}
+      </View>
+
+      <Animated.View style={{ height: animatedHeight, overflow: "hidden" }}>
+        {/* Header */}
+        <View style={[styles.row, styles.header]}>
+          <Text style={[styles.cell, styles.left, styles.headerText]}>
+            {t("trip.costTable.typeHeader")}
+          </Text>
+          <Text style={[styles.cell, styles.headerText]}>
+            {t("trip.costTable.totalCostHeader")}
+          </Text>
+        </View>
+
+        {/* Body */}
+        {data.map((item, index) => (
+          <View key={index} style={styles.row}>
+            <Text style={[styles.cell, styles.left]}>{item.type}</Text>
+            <Text style={[styles.cell, styles.right]}>
+              {item.total_cost.toLocaleString()}
+            </Text>
+          </View>
+        ))}
+
+        {/* Footer */}
+        <View style={[styles.row]}>
+          <Text style={[styles.cell, styles.left, styles.footerText]}>
+            {t("trip.costTable.totalLabel")}
+          </Text>
+          <Text style={[styles.cell, styles.total]}>
+            {tongCong.toLocaleString()}
+          </Text>
+        </View>
+
+        {/* View Detail Button */}
+        {data.length > 0 && (
+          <TouchableOpacity
+            style={styles.viewDetailButton}
+            onPress={handleViewDetail}
+          >
+            <Text style={styles.viewDetailText}>
+              {t("trip.costTable.viewDetail")}
+            </Text>
+          </TouchableOpacity>
+        )}
+      </Animated.View>
+
+      {/* Modal */}
+      <TripCostDetailModal
+        visible={modalVisible}
+        onClose={handleCloseModal}
+        data={data}
+      />
+    </View>
+  );
+};
+
+export default TripCostTable;

components/tripInfo/modal/CreateOrUpdateHaulModal.tsx

@@ -0,0 +1,587 @@
+import Select from "@/components/Select";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { queryGpsData } from "@/controller/DeviceController";
+import { queryUpdateFishingLogs } from "@/controller/TripController";
+import { useI18n } from "@/hooks/use-i18n";
+import { useThemeContext } from "@/hooks/use-theme-context";
+import { showErrorToast, showSuccessToast } from "@/services/toast_service";
+import { useFishes } from "@/state/use-fish";
+import { useTrip } from "@/state/use-trip";
+import { zodResolver } from "@hookform/resolvers/zod";
+import React from "react";
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import {
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  ScrollView,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { z } from "zod";
+import { InfoSection } from "./components/InfoSection";
+import { createStyles } from "./style/CreateOrUpdateHaulModal.styles";
+
+interface CreateOrUpdateHaulModalProps {
+  isVisible: boolean;
+  onClose: () => void;
+  fishingLog?: Model.FishingLog | null;
+  fishingLogIndex?: number;
+}
+const UNITS = ["con", "kg", "tấn"] as const;
+type Unit = (typeof UNITS)[number];
+
+const UNITS_OPTIONS = UNITS.map((unit) => ({
+  label: unit,
+  value: unit.toString(),
+}));
+
+const SIZE_UNITS = ["cm", "m"] as const;
+type SizeUnit = (typeof SIZE_UNITS)[number];
+
+const SIZE_UNITS_OPTIONS = SIZE_UNITS.map((unit) => ({
+  label: unit,
+  value: unit,
+}));
+
+// Zod schema cho 1 dòng cá
+const fishItemSchema = z.object({
+  id: z.number().min(1, ""),
+  quantity: z.number({ invalid_type_error: "" }).positive(""),
+  unit: z.enum(UNITS, { required_error: "" }),
+  size: z.number({ invalid_type_error: "" }).positive("").optional(),
+  sizeUnit: z.enum(SIZE_UNITS),
+});
+
+// Schema tổng: mảng các item
+const formSchema = z.object({
+  fish: z.array(fishItemSchema).min(1, ""),
+});
+type FormValues = z.infer<typeof formSchema>;
+
+const defaultItem = (): FormValues["fish"][number] => ({
+  id: -1,
+  quantity: 1,
+  unit: "con",
+  size: undefined,
+  sizeUnit: "cm",
+});
+
+const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
+  isVisible,
+  onClose,
+  fishingLog,
+  fishingLogIndex,
+}) => {
+  const { colors } = useThemeContext();
+  const styles = React.useMemo(() => createStyles(colors), [colors]);
+  const { t } = useI18n();
+  const [isCreateMode, setIsCreateMode] = React.useState(!fishingLog?.info);
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [expandedFishIndices, setExpandedFishIndices] = React.useState<
+    number[]
+  >([]);
+  const { trip, getTrip } = useTrip();
+  const { control, handleSubmit, formState, watch, reset } =
+    useForm<FormValues>({
+      resolver: zodResolver(formSchema),
+      defaultValues: {
+        fish: [defaultItem()],
+      },
+      mode: "onSubmit",
+    });
+  const { fishSpecies, getFishSpecies } = useFishes();
+  const { errors } = formState;
+  if (!fishSpecies) {
+    getFishSpecies();
+  }
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "fish",
+    keyName: "_id", // tránh đụng key
+  });
+
+  const handleToggleExpanded = (index: number) => {
+    setExpandedFishIndices((prev) =>
+      prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]
+    );
+  };
+
+  const onSubmit = async (values: FormValues) => {
+    // Ensure species list is available so we can populate name/rarity
+    if (!fishSpecies || fishSpecies.length === 0) {
+      showErrorToast(t("trip.createHaulModal.fishListNotReady"));
+      return;
+    }
+    // Helper to map form rows -> API info entries (single place)
+    const buildInfo = (rows: FormValues["fish"]) =>
+      rows.map((item) => {
+        const meta = fishSpecies.find((f) => f.id === item.id);
+        return {
+          fish_species_id: item.id,
+          fish_name: meta?.name ?? "",
+          catch_number: item.quantity,
+          catch_unit: item.unit,
+          fish_size: item.size,
+          fish_rarity: meta?.rarity_level ?? null,
+          fish_condition: "",
+          gear_usage: "",
+        } as unknown;
+      });
+
+    try {
+      const gpsResp = await queryGpsData();
+      if (!gpsResp.data) {
+        showErrorToast(t("trip.createHaulModal.gpsError"));
+        return;
+      }
+      const gpsData = gpsResp.data;
+
+      const info = buildInfo(values.fish) as any;
+
+      // Base payload fields shared between create and update
+      const base: Partial<Model.FishingLog> = {
+        fishing_log_id: fishingLog?.fishing_log_id || "",
+        trip_id: trip?.id || "",
+        start_at: fishingLog?.start_at!,
+        start_lat: fishingLog?.start_lat!,
+        start_lon: fishingLog?.start_lon!,
+        weather_description:
+          fishingLog?.weather_description || "Nắng đẹp, Trời nhiều mây",
+        info,
+        sync: true,
+      };
+
+      // Build final payload depending on create vs update
+      const body: Model.FishingLog =
+        fishingLog?.status == 0
+          ? ({
+              ...base,
+              haul_lat: gpsData.lat,
+              haul_lon: gpsData.lon,
+              end_at: new Date(),
+              status: 1,
+            } as Model.FishingLog)
+          : ({
+              ...base,
+              haul_lat: fishingLog?.haul_lat,
+              haul_lon: fishingLog?.haul_lon,
+              end_at: fishingLog?.end_at,
+              status: fishingLog?.status,
+            } as Model.FishingLog);
+      // console.log("Body: ", body);
+
+      const resp = await queryUpdateFishingLogs(body);
+      if (resp?.status === 200) {
+        showSuccessToast(
+          fishingLog?.fishing_log_id == null
+            ? t("trip.createHaulModal.addSuccess")
+            : t("trip.createHaulModal.updateSuccess")
+        );
+        getTrip();
+        onClose();
+      } else {
+        showErrorToast(
+          fishingLog?.fishing_log_id == null
+            ? t("trip.createHaulModal.addError")
+            : t("trip.createHaulModal.updateError")
+        );
+      }
+    } catch (err) {
+      console.error("onSubmit error:", err);
+      showErrorToast(t("trip.createHaulModal.validationError"));
+    }
+  };
+
+  // Initialize / reset form when modal visibility or haulData changes
+  React.useEffect(() => {
+    if (!isVisible) {
+      // when modal closed, clear form to default
+      reset({ fish: [defaultItem()] });
+      setIsCreateMode(true);
+      setIsEditing(false);
+      setExpandedFishIndices([]);
+      return;
+    }
+
+    // when modal opened, populate based on fishingLog
+    if (fishingLog?.info === null) {
+      // explicit null -> start with a single default item
+      reset({ fish: [defaultItem()] });
+      setIsCreateMode(true);
+      setIsEditing(true); // allow editing for new haul
+      setExpandedFishIndices([0]); // expand first item
+    } else if (Array.isArray(fishingLog?.info) && fishingLog?.info.length > 0) {
+      // map FishingLogInfo -> form rows
+      const mapped = fishingLog.info.map((h) => ({
+        id: h.fish_species_id ?? -1,
+        quantity: (h.catch_number as number) ?? 1,
+        unit: (h.catch_unit as Unit) ?? (defaultItem().unit as Unit),
+        size: (h.fish_size as number) ?? undefined,
+        sizeUnit: "cm" as SizeUnit,
+      }));
+      reset({ fish: mapped as any });
+      setIsCreateMode(false);
+      setIsEditing(false); // view mode by default
+      setExpandedFishIndices([]); // all collapsed
+    } else {
+      // undefined or empty array -> default
+      reset({ fish: [defaultItem()] });
+      setIsCreateMode(true);
+      setIsEditing(true); // allow editing for new haul
+      setExpandedFishIndices([0]); // expand first item
+    }
+  }, [isVisible, fishingLog?.info, reset]);
+  const renderRow = (item: any, index: number) => {
+    const isExpanded = expandedFishIndices.includes(index);
+    // Give expanded card highest zIndex, others get decreasing zIndex based on position
+    const cardZIndex = isExpanded ? 1000 : 100 - index;
+
+    return (
+      <View key={item._id} style={[styles.fishCard, { zIndex: cardZIndex }]}>
+        {/* Delete + Chevron buttons - top right corner */}
+        <View
+          style={{
+            position: "absolute",
+            top: 0,
+            right: 0,
+            zIndex: 9999,
+            flexDirection: "row",
+            alignItems: "center",
+            padding: 8,
+            gap: 8,
+          }}
+          pointerEvents="box-none"
+        >
+          {isEditing && (
+            <TouchableOpacity
+              onPress={() => remove(index)}
+              style={{
+                backgroundColor: colors.error,
+                borderRadius: 8,
+                width: 40,
+                height: 40,
+                justifyContent: "center",
+                alignItems: "center",
+                shadowColor: "#000",
+                shadowOpacity: 0.08,
+                shadowRadius: 2,
+                shadowOffset: { width: 0, height: 1 },
+                elevation: 2,
+              }}
+              hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
+              activeOpacity={0.7}
+            >
+              <IconSymbol name="trash" size={24} color="#fff" />
+            </TouchableOpacity>
+          )}
+          <TouchableOpacity
+            onPress={() => handleToggleExpanded(index)}
+            style={{
+              backgroundColor: colors.primary,
+              borderRadius: 8,
+              width: 40,
+              height: 40,
+              justifyContent: "center",
+              alignItems: "center",
+              shadowColor: "#000",
+              shadowOpacity: 0.08,
+              shadowRadius: 2,
+              shadowOffset: { width: 0, height: 1 },
+              elevation: 2,
+            }}
+            hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
+            activeOpacity={0.7}
+          >
+            <IconSymbol
+              name={isExpanded ? "chevron.up" : "chevron.down"}
+              size={24}
+              color="#fff"
+            />
+          </TouchableOpacity>
+        </View>
+
+        {/* Header - visible when collapsed */}
+        {!isExpanded && (
+          <View style={{ paddingRight: 100 }}>
+            {(() => {
+              const fishId = watch(`fish.${index}.id`);
+              const fishName = fishSpecies?.find((f) => f.id === fishId)?.name;
+              const quantity = watch(`fish.${index}.quantity`);
+              const unit = watch(`fish.${index}.unit`);
+
+              return (
+                <View style={styles.fishCardHeaderContent}>
+                  <Text style={styles.fishCardTitle}>
+                    {fishName || t("trip.createHaulModal.selectFish")}:
+                  </Text>
+                  <Text style={styles.fishCardSubtitle}>
+                    {fishName ? `${quantity} ${unit}` : "---"}
+                  </Text>
+                </View>
+              );
+            })()}
+          </View>
+        )}
+
+        {/* Form - visible when expanded */}
+        {isExpanded && (
+          <View style={{ paddingRight: 10 }}>
+            {/* Species dropdown */}
+            <Controller
+              control={control}
+              name={`fish.${index}.id`}
+              render={({ field: { value, onChange } }) => (
+                <View style={[styles.fieldGroup, { marginTop: 20 }]}>
+                  <Text style={styles.label}>
+                    {t("trip.createHaulModal.fishName")}
+                  </Text>
+                  <Select
+                    options={fishSpecies!.map((fish) => ({
+                      label: fish.name,
+                      value: fish.id,
+                    }))}
+                    value={value}
+                    onChange={onChange}
+                    placeholder={t("trip.createHaulModal.selectFish")}
+                    disabled={!isEditing}
+                  />
+                  {errors.fish?.[index]?.id && (
+                    <Text style={styles.errorText}>
+                      {t("trip.createHaulModal.selectFish")}
+                    </Text>
+                  )}
+                </View>
+              )}
+            />
+
+            {/* Số lượng & Đơn vị cùng hàng */}
+            <View style={{ flexDirection: "row", gap: 12 }}>
+              <View style={{ flex: 1 }}>
+                <Controller
+                  control={control}
+                  name={`fish.${index}.quantity`}
+                  render={({ field: { value, onChange, onBlur } }) => (
+                    <View style={styles.fieldGroup}>
+                      <Text style={styles.label}>
+                        {t("trip.createHaulModal.quantity")}
+                      </Text>
+                      <TextInput
+                        keyboardType="numeric"
+                        value={String(value ?? "")}
+                        onBlur={onBlur}
+                        onChangeText={(t) =>
+                          onChange(Number(t.replace(/,/g, ".")) || 0)
+                        }
+                        style={[
+                          styles.input,
+                          !isEditing && styles.inputDisabled,
+                        ]}
+                        editable={isEditing}
+                      />
+                      {errors.fish?.[index]?.quantity && (
+                        <Text style={styles.errorText}>
+                          {t("trip.createHaulModal.quantity")}
+                        </Text>
+                      )}
+                    </View>
+                  )}
+                />
+              </View>
+              <View style={{ flex: 1 }}>
+                <Controller
+                  control={control}
+                  name={`fish.${index}.unit`}
+                  render={({ field: { value, onChange } }) => (
+                    <View style={styles.fieldGroup}>
+                      <Text style={styles.label}>
+                        {t("trip.createHaulModal.unit")}
+                      </Text>
+                      <Select
+                        options={UNITS_OPTIONS.map((unit) => ({
+                          label: unit.label,
+                          value: unit.value,
+                        }))}
+                        value={value}
+                        onChange={onChange}
+                        placeholder={t("trip.createHaulModal.unit")}
+                        disabled={!isEditing}
+                        listStyle={{ maxHeight: 100 }}
+                      />
+                      {errors.fish?.[index]?.unit && (
+                        <Text style={styles.errorText}>
+                          {t("trip.createHaulModal.unit")}
+                        </Text>
+                      )}
+                    </View>
+                  )}
+                />
+              </View>
+            </View>
+
+            {/* Size (optional) + Unit dropdown */}
+            <View style={{ flexDirection: "row", gap: 12 }}>
+              <View style={{ flex: 1 }}>
+                <Controller
+                  control={control}
+                  name={`fish.${index}.size`}
+                  render={({ field: { value, onChange, onBlur } }) => (
+                    <View style={styles.fieldGroup}>
+                      <Text style={styles.label}>
+                        {t("trip.createHaulModal.size")} (
+                        {t("trip.createHaulModal.optional")})
+                      </Text>
+                      <TextInput
+                        keyboardType="numeric"
+                        value={value ? String(value) : ""}
+                        onBlur={onBlur}
+                        onChangeText={(t) =>
+                          onChange(t ? Number(t.replace(/,/g, ".")) : undefined)
+                        }
+                        style={[
+                          styles.input,
+                          !isEditing && styles.inputDisabled,
+                        ]}
+                        editable={isEditing}
+                      />
+                      {errors.fish?.[index]?.size && (
+                        <Text style={styles.errorText}>
+                          {t("trip.createHaulModal.size")}
+                        </Text>
+                      )}
+                    </View>
+                  )}
+                />
+              </View>
+              <View style={{ flex: 1 }}>
+                <Controller
+                  control={control}
+                  name={`fish.${index}.sizeUnit`}
+                  render={({ field: { value, onChange } }) => (
+                    <View style={styles.fieldGroup}>
+                      <Text style={styles.label}>
+                        {t("trip.createHaulModal.unit")}
+                      </Text>
+                      <Select
+                        options={SIZE_UNITS_OPTIONS}
+                        value={value}
+                        onChange={onChange}
+                        placeholder={t("trip.createHaulModal.unit")}
+                        disabled={!isEditing}
+                        listStyle={{ maxHeight: 80 }}
+                      />
+                    </View>
+                  )}
+                />
+              </View>
+            </View>
+          </View>
+        )}
+      </View>
+    );
+  };
+
+  return (
+    <Modal
+      visible={isVisible}
+      animationType="slide"
+      presentationStyle="pageSheet"
+      onRequestClose={onClose}
+    >
+      <KeyboardAvoidingView
+        style={{ flex: 1 }}
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        keyboardVerticalOffset={60}
+      >
+        <View style={styles.container}>
+          {/* Header */}
+          <View style={styles.header}>
+            <Text style={styles.title}>
+              {isCreateMode
+                ? t("trip.createHaulModal.addFish")
+                : t("trip.createHaulModal.edit")}
+            </Text>
+            <View style={styles.headerButtons}>
+              {isEditing ? (
+                <>
+                  {!isCreateMode && (
+                    <TouchableOpacity
+                      onPress={() => {
+                        setIsEditing(false);
+                        reset(); // reset to previous values
+                      }}
+                      style={[
+                        styles.saveButton,
+                        { backgroundColor: "#6c757d" },
+                      ]}
+                    >
+                      <Text style={styles.saveButtonText}>
+                        {t("trip.createHaulModal.cancel")}
+                      </Text>
+                    </TouchableOpacity>
+                  )}
+                  <TouchableOpacity
+                    onPress={handleSubmit(onSubmit)}
+                    style={styles.saveButton}
+                  >
+                    <Text style={styles.saveButtonText}>
+                      {t("trip.createHaulModal.save")}
+                    </Text>
+                  </TouchableOpacity>
+                </>
+              ) : (
+                !isCreateMode && (
+                  <TouchableOpacity
+                    onPress={() => setIsEditing(true)}
+                    style={[styles.saveButton, { backgroundColor: "#17a2b8" }]}
+                  >
+                    <Text style={styles.saveButtonText}>
+                      {t("trip.createHaulModal.edit")}
+                    </Text>
+                  </TouchableOpacity>
+                )
+              )}
+              <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+                <View style={styles.closeIconButton}>
+                  <IconSymbol name="xmark" size={24} color="#fff" />
+                </View>
+              </TouchableOpacity>
+            </View>
+          </View>
+
+          {/* Content */}
+          <ScrollView style={styles.content}>
+            {/* Info Section */}
+            <InfoSection fishingLog={fishingLog!} stt={fishingLogIndex} />
+
+            {/* Fish List */}
+            {fields.map((item, index) => renderRow(item, index))}
+
+            {/* Add Button - only show when editing */}
+            {isEditing && (
+              <TouchableOpacity
+                onPress={() => append(defaultItem())}
+                style={styles.addButton}
+              >
+                <Text style={styles.addButtonText}>
+                  + {t("trip.createHaulModal.addFish")}
+                </Text>
+              </TouchableOpacity>
+            )}
+
+            {/* Error Message */}
+            {errors.fish && (
+              <Text style={styles.errorText}>
+                {t("trip.createHaulModal.validationError")}
+              </Text>
+            )}
+          </ScrollView>
+        </View>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+};
+
+export default CreateOrUpdateHaulModal;

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;

components/tripInfo/modal/TripCostDetailModal.tsx

@@ -0,0 +1,245 @@
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { useI18n } from "@/hooks/use-i18n";
+import { useThemeContext } from "@/hooks/use-theme-context";
+import React, { useEffect, useState } from "react";
+import {
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  ScrollView,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { createStyles } from "./style/TripCostDetailModal.styles";
+
+// ---------------------------
+// 🧩 Interface
+// ---------------------------
+interface TripCostDetailModalProps {
+  visible: boolean;
+  onClose: () => void;
+  data: Model.TripCost[];
+}
+
+// ---------------------------
+// 💰 Component Modal
+// ---------------------------
+const TripCostDetailModal: React.FC<TripCostDetailModalProps> = ({
+  visible,
+  onClose,
+  data,
+}) => {
+  const { t } = useI18n();
+  const { colors } = useThemeContext();
+  const styles = React.useMemo(() => createStyles(colors), [colors]);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editableData, setEditableData] = useState<Model.TripCost[]>(data);
+
+  // Cập nhật editableData khi props data thay đổi (API fetch xong)
+  useEffect(() => {
+    setEditableData(data);
+  }, [data]);
+
+  const tongCong = editableData.reduce((sum, item) => sum + item.total_cost, 0);
+
+  const handleEdit = () => {
+    setIsEditing(!isEditing);
+  };
+
+  const handleSave = () => {
+    setIsEditing(false);
+    // TODO: Save data to backend
+    console.log("Saved data:", editableData);
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+    setEditableData(data); // Reset to original data
+  };
+
+  const updateItem = (
+    index: number,
+    field: keyof Model.TripCost,
+    value: string
+  ) => {
+    setEditableData((prev) =>
+      prev.map((item, idx) => {
+        if (idx === index) {
+          const updated = { ...item, [field]: value };
+          // Recalculate total_cost
+          if (field === "amount" || field === "cost_per_unit") {
+            const amount =
+              Number(field === "amount" ? value : item.amount) || 0;
+            const costPerUnit =
+              Number(field === "cost_per_unit" ? value : item.cost_per_unit) ||
+              0;
+            updated.total_cost = amount * costPerUnit;
+          }
+          return updated;
+        }
+        return item;
+      })
+    );
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      animationType="slide"
+      presentationStyle="pageSheet"
+      onRequestClose={onClose}
+    >
+      <KeyboardAvoidingView
+        style={{ flex: 1 }}
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        keyboardVerticalOffset={60}
+      >
+        <View style={styles.container}>
+          {/* Header */}
+          <View style={styles.header}>
+            <Text style={styles.title}>{t("trip.costDetailModal.title")}</Text>
+            <View style={styles.headerButtons}>
+              {isEditing ? (
+                <>
+                  <TouchableOpacity
+                    onPress={handleCancel}
+                    style={styles.cancelButton}
+                  >
+                    <Text style={styles.cancelButtonText}>
+                      {t("trip.costDetailModal.cancel")}
+                    </Text>
+                  </TouchableOpacity>
+                  <TouchableOpacity
+                    onPress={handleSave}
+                    style={styles.saveButton}
+                  >
+                    <Text style={styles.saveButtonText}>
+                      {t("trip.costDetailModal.save")}
+                    </Text>
+                  </TouchableOpacity>
+                </>
+              ) : (
+                <TouchableOpacity
+                  onPress={handleEdit}
+                  style={styles.editButton}
+                >
+                  <View style={styles.editIconButton}>
+                    <IconSymbol
+                      name="pencil"
+                      size={28}
+                      color="#fff"
+                      weight="heavy"
+                    />
+                  </View>
+                </TouchableOpacity>
+              )}
+              <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+                <View style={styles.closeIconButton}>
+                  <IconSymbol name="xmark" size={28} color="#fff" />
+                </View>
+              </TouchableOpacity>
+            </View>
+          </View>
+
+          {/* Content */}
+          <ScrollView style={styles.content}>
+            {editableData.map((item, index) => (
+              <View key={index} style={styles.itemCard}>
+                {/* Loại */}
+                <View style={styles.fieldGroup}>
+                  <Text style={styles.label}>
+                    {t("trip.costDetailModal.costType")}
+                  </Text>
+                  <TextInput
+                    style={[styles.input, !isEditing && styles.inputDisabled]}
+                    value={item.type}
+                    onChangeText={(value) => updateItem(index, "type", value)}
+                    editable={isEditing}
+                    placeholder={t("trip.costDetailModal.enterCostType")}
+                  />
+                </View>
+
+                {/* Số lượng & Đơn vị */}
+                <View style={styles.rowGroup}>
+                  <View
+                    style={[styles.fieldGroup, { flex: 1, marginRight: 8 }]}
+                  >
+                    <Text style={styles.label}>
+                      {t("trip.costDetailModal.quantity")}
+                    </Text>
+                    <TextInput
+                      style={[styles.input, !isEditing && styles.inputDisabled]}
+                      value={String(item.amount ?? "")}
+                      onChangeText={(value) =>
+                        updateItem(index, "amount", value)
+                      }
+                      editable={isEditing}
+                      keyboardType="numeric"
+                      placeholder="0"
+                    />
+                  </View>
+                  <View style={[styles.fieldGroup, { flex: 1, marginLeft: 8 }]}>
+                    <Text style={styles.label}>
+                      {t("trip.costDetailModal.unit")}
+                    </Text>
+                    <TextInput
+                      style={[styles.input, !isEditing && styles.inputDisabled]}
+                      value={item.unit}
+                      onChangeText={(value) => updateItem(index, "unit", value)}
+                      editable={isEditing}
+                      placeholder={t("trip.costDetailModal.placeholder")}
+                    />
+                  </View>
+                </View>
+
+                {/* Chi phí/đơn vị */}
+                <View style={styles.fieldGroup}>
+                  <Text style={styles.label}>
+                    {t("trip.costDetailModal.costPerUnit")}
+                  </Text>
+                  <TextInput
+                    style={[styles.input, !isEditing && styles.inputDisabled]}
+                    value={String(item.cost_per_unit ?? "")}
+                    onChangeText={(value) =>
+                      updateItem(index, "cost_per_unit", value)
+                    }
+                    editable={isEditing}
+                    keyboardType="numeric"
+                    placeholder="0"
+                  />
+                </View>
+
+                {/* Tổng chi phí */}
+                <View style={styles.fieldGroup}>
+                  <Text style={styles.label}>
+                    {t("trip.costDetailModal.totalCost")}
+                  </Text>
+                  <View style={styles.totalContainer}>
+                    <Text style={styles.totalText}>
+                      {item.total_cost.toLocaleString()}{" "}
+                      {t("trip.costDetailModal.vnd")}
+                    </Text>
+                  </View>
+                </View>
+              </View>
+            ))}
+
+            {/* Footer Total */}
+            <View style={styles.footerTotal}>
+              <Text style={styles.footerLabel}>
+                {t("trip.costDetailModal.total")}
+              </Text>
+              <Text style={styles.footerAmount}>
+                {tongCong.toLocaleString()} {t("trip.costDetailModal.vnd")}
+              </Text>
+            </View>
+          </ScrollView>
+        </View>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+};
+
+export default TripCostDetailModal;

components/tripInfo/modal/components/InfoSection.tsx

@@ -0,0 +1,119 @@
+import { useI18n } from "@/hooks/use-i18n";
+import { useThemeContext } from "@/hooks/use-theme-context";
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+
+interface InfoSectionProps {
+  fishingLog?: Model.FishingLog;
+  stt?: number;
+}
+
+export const InfoSection: React.FC<InfoSectionProps> = ({
+  fishingLog,
+  stt,
+}) => {
+  const { t } = useI18n();
+  const { colors } = useThemeContext();
+  const styles = React.useMemo(() => createStyles(colors), [colors]);
+
+  if (!fishingLog) {
+    return null;
+  }
+  const infoItems = [
+    {
+      label: t("trip.infoSection.sttLabel"),
+      value: `${t("trip.infoSection.haulPrefix")} ${stt}`,
+    },
+    {
+      label: t("trip.infoSection.statusLabel"),
+      value:
+        fishingLog.status === 1
+          ? t("trip.infoSection.statusCompleted")
+          : t("trip.infoSection.statusPending"),
+      isStatus: true,
+    },
+    {
+      label: t("trip.infoSection.startTimeLabel"),
+      value: fishingLog.start_at
+        ? new Date(fishingLog.start_at).toLocaleString()
+        : t("trip.infoSection.notUpdated"),
+    },
+    {
+      label: t("trip.infoSection.endTimeLabel"),
+      value:
+        fishingLog.end_at.toString() !== "0001-01-01T00:00:00Z"
+          ? new Date(fishingLog.end_at).toLocaleString()
+          : "-",
+    },
+  ];
+
+  return (
+    <View style={styles.infoCard}>
+      {infoItems.map((item, index) => (
+        <View key={index} style={styles.infoRow}>
+          <Text style={styles.infoLabel}>{item.label}</Text>
+          {item.isStatus ? (
+            <View
+              style={[
+                styles.statusBadge,
+                item.value === t("trip.infoSection.statusCompleted")
+                  ? styles.statusBadgeCompleted
+                  : styles.statusBadgeInProgress,
+              ]}
+            >
+              <Text style={styles.statusBadgeText}>{item.value}</Text>
+            </View>
+          ) : (
+            <Text style={styles.infoValue}>{item.value}</Text>
+          )}
+        </View>
+      ))}
+    </View>
+  );
+};
+
+const createStyles = (colors: any) =>
+  StyleSheet.create({
+    infoCard: {
+      borderWidth: 1,
+      borderColor: colors.border,
+      borderRadius: 8,
+      padding: 12,
+      marginBottom: 12,
+      backgroundColor: colors.surfaceSecondary,
+    },
+    infoRow: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginBottom: 8,
+    },
+    infoLabel: {
+      fontSize: 14,
+      fontWeight: "600",
+      color: colors.textSecondary,
+    },
+    infoValue: {
+      fontSize: 16,
+      color: colors.text,
+      paddingVertical: 8,
+    },
+    statusBadge: {
+      paddingVertical: 4,
+      paddingHorizontal: 12,
+      borderRadius: 12,
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    statusBadgeCompleted: {
+      backgroundColor: colors.success,
+    },
+    statusBadgeInProgress: {
+      backgroundColor: colors.warning,
+    },
+    statusBadgeText: {
+      fontSize: 14,
+      fontWeight: "600",
+      color: "#fff",
+    },
+  });

components/tripInfo/modal/style/CreateOrUpdateHaulModal.styles.ts

@@ -0,0 +1,179 @@
+import { Colors } from "@/constants/theme";
+import { StyleSheet } from "react-native";
+
+export const createStyles = (colors: typeof Colors.light) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.backgroundSecondary,
+    },
+    header: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      paddingHorizontal: 20,
+      paddingTop: 30,
+      paddingBottom: 16,
+      backgroundColor: colors.surface,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.separator,
+    },
+    title: {
+      fontSize: 22,
+      fontWeight: "700",
+      color: colors.text,
+      flex: 1,
+    },
+    headerButtons: {
+      flexDirection: "row",
+      gap: 12,
+      alignItems: "center",
+    },
+    closeButton: {
+      padding: 4,
+    },
+    closeIconButton: {
+      backgroundColor: colors.error,
+      borderRadius: 10,
+      padding: 10,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    saveButton: {
+      backgroundColor: colors.primary,
+      borderRadius: 8,
+      paddingHorizontal: 20,
+      paddingVertical: 10,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    saveButtonText: {
+      color: "#fff",
+      fontSize: 16,
+      fontWeight: "600",
+    },
+    content: {
+      flex: 1,
+      padding: 16,
+      marginBottom: 15,
+    },
+    fishCard: {
+      backgroundColor: colors.surfaceSecondary,
+      borderRadius: 12,
+      padding: 16,
+      marginBottom: 16,
+      shadowColor: "#000",
+      shadowOpacity: 0.05,
+      shadowRadius: 4,
+      shadowOffset: { width: 0, height: 2 },
+      elevation: 2,
+    },
+
+    fishCardHeaderContent: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 8,
+    },
+    fishCardTitle: {
+      fontSize: 16,
+      fontWeight: "700",
+      color: colors.text,
+    },
+    fishCardSubtitle: {
+      fontSize: 15,
+      color: colors.warning,
+      fontWeight: "500",
+    },
+    fieldGroup: {
+      marginBottom: 14,
+    },
+    label: {
+      fontSize: 14,
+      fontWeight: "600",
+      color: colors.textSecondary,
+      marginBottom: 6,
+    },
+    input: {
+      borderWidth: 1,
+      borderColor: colors.primary,
+      borderRadius: 8,
+      paddingHorizontal: 12,
+      paddingVertical: 10,
+      fontSize: 16,
+      backgroundColor: colors.surface,
+      color: colors.text,
+    },
+    inputDisabled: {
+      backgroundColor: colors.backgroundSecondary,
+      color: colors.textSecondary,
+      borderColor: colors.border,
+    },
+    errorText: {
+      color: colors.error,
+      fontSize: 12,
+      marginTop: 4,
+      fontWeight: "500",
+    },
+    buttonRow: {
+      flexDirection: "row",
+      justifyContent: "flex-end",
+      gap: 8,
+      marginTop: 12,
+    },
+    removeButton: {
+      backgroundColor: colors.error,
+      borderRadius: 8,
+      paddingHorizontal: 16,
+      paddingVertical: 8,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    removeButtonText: {
+      color: "#fff",
+      fontSize: 14,
+      fontWeight: "600",
+    },
+    addButton: {
+      backgroundColor: colors.primary,
+      borderRadius: 12,
+      padding: 16,
+      marginBottom: 12,
+      justifyContent: "center",
+      alignItems: "center",
+      shadowColor: "#000",
+      shadowOpacity: 0.05,
+      shadowRadius: 4,
+      shadowOffset: { width: 0, height: 2 },
+      elevation: 2,
+    },
+    addButtonText: {
+      fontSize: 16,
+      fontWeight: "600",
+      color: "#fff",
+    },
+    footerSection: {
+      paddingHorizontal: 16,
+      paddingVertical: 16,
+      backgroundColor: colors.surface,
+      borderTopWidth: 1,
+      borderTopColor: colors.separator,
+    },
+    saveButtonLarge: {
+      backgroundColor: colors.primary,
+      borderRadius: 8,
+      paddingVertical: 14,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    saveButtonLargeText: {
+      color: "#fff",
+      fontSize: 16,
+      fontWeight: "700",
+    },
+    emptyStateText: {
+      textAlign: "center",
+      color: colors.textSecondary,
+      fontSize: 14,
+      marginTop: 20,
+    },
+  });

components/tripInfo/modal/style/CrewDetailModal.styles.ts

@@ -0,0 +1,69 @@
+import { Colors } from "@/constants/theme";
+import { StyleSheet } from "react-native";
+
+export const createStyles = (colors: typeof Colors.light) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.backgroundSecondary,
+    },
+    header: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      paddingHorizontal: 20,
+      paddingTop: 30,
+      paddingBottom: 16,
+      backgroundColor: colors.surface,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.separator,
+    },
+    title: {
+      fontSize: 22,
+      fontWeight: "700",
+      color: colors.text,
+      flex: 1,
+    },
+    closeButton: {
+      padding: 4,
+    },
+    closeIconButton: {
+      backgroundColor: colors.error,
+      borderRadius: 10,
+      padding: 10,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    content: {
+      flex: 1,
+      padding: 16,
+      marginBottom: 15,
+    },
+    infoCard: {
+      backgroundColor: colors.card,
+      borderRadius: 12,
+      padding: 16,
+      marginBottom: 35,
+      shadowColor: "#000",
+      shadowOpacity: 0.05,
+      shadowRadius: 4,
+      shadowOffset: { width: 0, height: 2 },
+      elevation: 2,
+    },
+    infoRow: {
+      paddingVertical: 12,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.separator,
+    },
+    infoLabel: {
+      fontSize: 13,
+      fontWeight: "600",
+      color: colors.textSecondary,
+      marginBottom: 6,
+    },
+    infoValue: {
+      fontSize: 16,
+      color: colors.text,
+      fontWeight: "500",
+    },
+  });

components/tripInfo/modal/style/NetDetailModal.styles.ts

@@ -0,0 +1,293 @@
+import { Colors } from "@/constants/theme";
+import { StyleSheet } from "react-native";
+
+export const createStyles = (colors: typeof Colors.light) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.backgroundSecondary,
+    },
+    header: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      paddingHorizontal: 20,
+      paddingTop: 30,
+      paddingBottom: 16,
+      backgroundColor: colors.surface,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.separator,
+    },
+    title: {
+      fontSize: 22,
+      fontWeight: "700",
+      color: colors.text,
+      flex: 1,
+    },
+    closeButton: {
+      padding: 4,
+    },
+    closeIconButton: {
+      backgroundColor: colors.error,
+      borderRadius: 10,
+      padding: 10,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    content: {
+      flex: 1,
+      padding: 16,
+      marginBottom: 15,
+    },
+    infoCard: {
+      backgroundColor: colors.card,
+      borderRadius: 12,
+      padding: 16,
+      marginBottom: 35,
+      shadowColor: "#000",
+      shadowOpacity: 0.05,
+      shadowRadius: 4,
+      shadowOffset: { width: 0, height: 2 },
+      elevation: 2,
+    },
+    infoRow: {
+      paddingVertical: 12,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.separator,
+    },
+    infoLabel: {
+      fontSize: 13,
+      fontWeight: "600",
+      color: colors.textSecondary,
+      marginBottom: 6,
+    },
+    infoValue: {
+      fontSize: 16,
+      color: colors.text,
+      fontWeight: "500",
+    },
+    statusBadge: {
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+      borderRadius: 8,
+      alignSelf: "flex-start",
+    },
+    statusBadgeCompleted: {
+      backgroundColor: colors.success,
+    },
+    statusBadgeInProgress: {
+      backgroundColor: colors.warning,
+    },
+    statusBadgeText: {
+      fontSize: 14,
+      fontWeight: "600",
+      color: "#fff",
+    },
+    statusBadgeTextCompleted: {
+      color: "#fff",
+    },
+    statusBadgeTextInProgress: {
+      color: "#fff",
+    },
+    headerButtons: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 12,
+    },
+    editButton: {
+      padding: 4,
+    },
+    editIconButton: {
+      backgroundColor: colors.primary,
+      borderRadius: 10,
+      padding: 10,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    cancelButton: {
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+    },
+    cancelButtonText: {
+      color: colors.primary,
+      fontSize: 16,
+      fontWeight: "600",
+    },
+    saveButton: {
+      backgroundColor: colors.primary,
+      paddingHorizontal: 16,
+      paddingVertical: 6,
+      borderRadius: 6,
+    },
+    saveButtonText: {
+      color: "#fff",
+      fontSize: 16,
+      fontWeight: "600",
+    },
+    sectionHeader: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginTop: 16,
+      marginBottom: 12,
+      paddingHorizontal: 4,
+    },
+    sectionTitle: {
+      fontSize: 18,
+      fontWeight: "700",
+      color: colors.text,
+    },
+    totalCatchText: {
+      fontSize: 16,
+      fontWeight: "600",
+      color: colors.primary,
+    },
+    fishCard: {
+      position: "relative",
+      backgroundColor: colors.card,
+      borderRadius: 12,
+      padding: 16,
+      marginBottom: 12,
+      shadowColor: "#000",
+      shadowOpacity: 0.05,
+      shadowRadius: 4,
+      shadowOffset: { width: 0, height: 2 },
+      elevation: 2,
+    },
+    fieldGroup: {
+      marginBottom: 12,
+      marginTop: 0,
+    },
+    rowGroup: {
+      flexDirection: "row",
+      marginBottom: 12,
+    },
+    label: {
+      fontSize: 13,
+      fontWeight: "600",
+      color: colors.textSecondary,
+      marginBottom: 6,
+    },
+    input: {
+      borderWidth: 1,
+      borderColor: colors.primary,
+      borderRadius: 8,
+      paddingHorizontal: 12,
+      paddingVertical: 10,
+      fontSize: 15,
+      color: colors.text,
+      backgroundColor: colors.surface,
+    },
+    selectButton: {
+      borderWidth: 1,
+      borderColor: colors.primary,
+      borderRadius: 8,
+      paddingHorizontal: 12,
+      paddingVertical: 10,
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      backgroundColor: colors.surface,
+    },
+    selectButtonText: {
+      fontSize: 15,
+      color: colors.text,
+    },
+    optionsList: {
+      position: "absolute",
+      top: 46,
+      left: 0,
+      right: 0,
+      borderWidth: 1,
+      borderColor: colors.primary,
+      borderRadius: 8,
+      marginTop: 4,
+      backgroundColor: colors.surface,
+      maxHeight: 100,
+      zIndex: 1000,
+      elevation: 5,
+      shadowColor: "#000",
+      shadowOpacity: 0.15,
+      shadowRadius: 8,
+      shadowOffset: { width: 0, height: 4 },
+    },
+    optionItem: {
+      paddingHorizontal: 12,
+      paddingVertical: 12,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.separator,
+    },
+    optionText: {
+      fontSize: 15,
+      color: colors.text,
+    },
+    optionsStatusFishList: {
+      borderWidth: 1,
+      borderColor: colors.primary,
+      borderRadius: 8,
+      marginTop: 4,
+      backgroundColor: colors.surface,
+      maxHeight: 120,
+      zIndex: 1000,
+      elevation: 5,
+      shadowColor: "#000",
+      shadowOpacity: 0.15,
+      shadowRadius: 8,
+      shadowOffset: { width: 0, height: 4 },
+    },
+    fishNameDropdown: {
+      position: "absolute",
+      top: 46,
+      left: 0,
+      right: 0,
+      borderWidth: 1,
+      borderColor: colors.primary,
+      borderRadius: 8,
+      marginTop: 4,
+      backgroundColor: colors.surface,
+      maxHeight: 180,
+      zIndex: 1000,
+      elevation: 5,
+      shadowColor: "#000",
+      shadowOpacity: 0.15,
+      shadowRadius: 8,
+      shadowOffset: { width: 0, height: 4 },
+    },
+    fishCardHeaderContent: {
+      flexDirection: "row",
+      gap: 5,
+    },
+    fishCardTitle: {
+      fontSize: 16,
+      fontWeight: "600",
+      color: colors.text,
+    },
+    fishCardSubtitle: {
+      fontSize: 15,
+      color: colors.warning,
+      marginTop: 0,
+    },
+    addFishButton: {
+      backgroundColor: colors.primary,
+      borderRadius: 12,
+      padding: 16,
+      marginBottom: 12,
+      justifyContent: "center",
+      alignItems: "center",
+      shadowColor: "#000",
+      shadowOpacity: 0.05,
+      shadowRadius: 4,
+      shadowOffset: { width: 0, height: 2 },
+      elevation: 2,
+    },
+    addFishButtonContent: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 8,
+    },
+    addFishButtonText: {
+      fontSize: 16,
+      fontWeight: "600",
+      color: "#fff",
+    },
+  });

components/tripInfo/modal/style/TripCostDetailModal.styles.ts

@@ -0,0 +1,153 @@
+import { Colors } from "@/constants/theme";
+import { StyleSheet } from "react-native";
+
+export const createStyles = (colors: typeof Colors.light) =>
+  StyleSheet.create({
+    closeIconButton: {
+      backgroundColor: colors.error,
+      borderRadius: 10,
+      padding: 10,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    container: {
+      flex: 1,
+      backgroundColor: colors.backgroundSecondary,
+    },
+    header: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      paddingHorizontal: 20,
+      paddingTop: 30,
+      paddingBottom: 16,
+      backgroundColor: colors.surface,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.separator,
+    },
+    title: {
+      fontSize: 22,
+      fontWeight: "700",
+      color: colors.text,
+      flex: 1,
+    },
+    headerButtons: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 12,
+    },
+    editButton: {
+      padding: 4,
+    },
+    editIconButton: {
+      backgroundColor: colors.primary,
+      borderRadius: 10,
+      padding: 10,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    cancelButton: {
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+    },
+    cancelButtonText: {
+      color: colors.primary,
+      fontSize: 16,
+      fontWeight: "600",
+    },
+    saveButton: {
+      backgroundColor: colors.primary,
+      paddingHorizontal: 16,
+      paddingVertical: 6,
+      borderRadius: 6,
+    },
+    saveButtonText: {
+      color: "#fff",
+      fontSize: 16,
+      fontWeight: "600",
+    },
+    closeButton: {
+      padding: 4,
+    },
+    content: {
+      flex: 1,
+      padding: 16,
+    },
+    itemCard: {
+      backgroundColor: colors.surfaceSecondary,
+      borderRadius: 12,
+      padding: 16,
+      marginBottom: 12,
+      shadowColor: "#000",
+      shadowOpacity: 0.05,
+      shadowRadius: 4,
+      shadowOffset: { width: 0, height: 2 },
+      elevation: 2,
+    },
+    fieldGroup: {
+      marginBottom: 12,
+    },
+    rowGroup: {
+      flexDirection: "row",
+      marginBottom: 12,
+    },
+    label: {
+      fontSize: 13,
+      fontWeight: "600",
+      color: colors.textSecondary,
+      marginBottom: 6,
+    },
+    input: {
+      borderWidth: 1,
+      borderColor: colors.primary,
+      borderRadius: 8,
+      paddingHorizontal: 12,
+      paddingVertical: 10,
+      fontSize: 15,
+      color: colors.text,
+      backgroundColor: colors.surface,
+    },
+    inputDisabled: {
+      borderColor: colors.border,
+      backgroundColor: colors.backgroundSecondary,
+      color: colors.textSecondary,
+    },
+    totalContainer: {
+      backgroundColor: colors.backgroundSecondary,
+      borderRadius: 8,
+      paddingHorizontal: 12,
+      paddingVertical: 10,
+      borderWidth: 1,
+      borderColor: colors.border,
+    },
+    totalText: {
+      fontSize: 16,
+      fontWeight: "700",
+      color: colors.warning,
+    },
+    footerTotal: {
+      backgroundColor: colors.card,
+      borderRadius: 12,
+      padding: 20,
+      marginTop: 8,
+      marginBottom: 50,
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      shadowColor: "#000",
+      shadowOpacity: 0.1,
+      shadowRadius: 4,
+      shadowOffset: { width: 0, height: 2 },
+      elevation: 3,
+    },
+    footerLabel: {
+      fontSize: 18,
+      fontWeight: "700",
+      color: colors.primary,
+    },
+    footerAmount: {
+      fontSize: 20,
+      fontWeight: "700",
+      color: colors.warning,
+    },
+  });

components/tripInfo/style/createTableStyles.ts

@@ -0,0 +1,175 @@
+import { StyleSheet } from "react-native";
+import { Colors } from "@/constants/theme";
+
+export type ColorScheme = "light" | "dark";
+
+export function createTableStyles(colorScheme: ColorScheme) {
+  const colors = Colors[colorScheme];
+
+  return StyleSheet.create({
+    container: {
+      width: "100%",
+      backgroundColor: colors.surface,
+      borderRadius: 12,
+      padding: 16,
+      marginVertical: 10,
+      borderWidth: 1,
+      borderColor: colors.border,
+      shadowColor: colors.text,
+      shadowOpacity: 0.1,
+      shadowRadius: 4,
+      elevation: 2,
+    },
+    headerRow: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+    },
+    title: {
+      fontSize: 18,
+      fontWeight: "700",
+      color: colors.text,
+    },
+    totalCollapsed: {
+      color: colors.warning,
+      fontSize: 18,
+      fontWeight: "700",
+      textAlign: "center",
+    },
+    row: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      paddingVertical: 8,
+      borderBottomWidth: 0.5,
+      borderBottomColor: colors.separator,
+    },
+    header: {
+      backgroundColor: colors.backgroundSecondary,
+      borderRadius: 6,
+      marginTop: 10,
+    },
+    left: {
+      textAlign: "left",
+    },
+    rowHorizontal: {
+      flexDirection: "row",
+      paddingVertical: 8,
+      borderBottomWidth: 0.5,
+      borderBottomColor: colors.separator,
+      paddingLeft: 15,
+    },
+    tableHeader: {
+      backgroundColor: colors.backgroundSecondary,
+      borderRadius: 6,
+      marginTop: 10,
+    },
+    headerCell: {
+      flex: 1,
+      fontSize: 15,
+      fontWeight: "600",
+      color: colors.text,
+      textAlign: "center",
+    },
+    headerCellLeft: {
+      flex: 1,
+      fontSize: 15,
+      fontWeight: "600",
+      color: colors.text,
+      textAlign: "left",
+    },
+    cell: {
+      flex: 1,
+      fontSize: 15,
+      color: colors.text,
+      textAlign: "center",
+    },
+    cellLeft: {
+      flex: 1,
+      fontSize: 15,
+      color: colors.text,
+      textAlign: "left",
+    },
+    cellRight: {
+      flex: 1,
+      fontSize: 15,
+      color: colors.text,
+      textAlign: "right",
+    },
+    cellWrapper: {
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    headerText: {
+      fontWeight: "600",
+      color: colors.text,
+    },
+    footerText: {
+      color: colors.primary,
+      fontWeight: "600",
+    },
+    footerTotal: {
+      color: colors.warning,
+      fontWeight: "800",
+    },
+    sttCell: {
+      flex: 0.3,
+      fontSize: 15,
+      color: colors.text,
+      textAlign: "center",
+      paddingLeft: 10,
+    },
+    statusContainer: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    statusDot: {
+      width: 8,
+      height: 8,
+      borderRadius: 4,
+      backgroundColor: colors.success,
+      marginRight: 6,
+    },
+    statusDotPending: {
+      width: 8,
+      height: 8,
+      borderRadius: 4,
+      backgroundColor: colors.warning,
+      marginRight: 6,
+    },
+    statusText: {
+      fontSize: 15,
+      color: colors.primary,
+      textDecorationLine: "underline",
+    },
+    linkText: {
+      color: colors.primary,
+      textDecorationLine: "underline",
+    },
+    viewDetailButton: {
+      marginTop: 12,
+      paddingVertical: 8,
+      alignItems: "center",
+    },
+    viewDetailText: {
+      color: colors.primary,
+      fontSize: 15,
+      fontWeight: "600",
+      textDecorationLine: "underline",
+    },
+    total: {
+      color: colors.warning,
+      fontWeight: "700",
+    },
+    right: {
+      color: colors.warning,
+      fontWeight: "600",
+    },
+    footerRow: {
+      marginTop: 6,
+    },
+  });
+}
+
+export type TableStyles = ReturnType<typeof createTableStyles>;

components/ui/collapsible.tsx

@@ -0,0 +1,45 @@
+import { PropsWithChildren, useState } from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+
+import { ThemedText } from '@/components/themed-text';
+import { ThemedView } from '@/components/themed-view';
+import { IconSymbol } from '@/components/ui/icon-symbol';
+import { Colors } from '@/constants/theme';
+import { useColorScheme } from '@/hooks/use-theme-context';
+
+export function Collapsible({ children, title }: PropsWithChildren & { title: string }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const theme = useColorScheme();
+
+  return (
+    <ThemedView>
+      <TouchableOpacity
+        style={styles.heading}
+        onPress={() => setIsOpen((value) => !value)}
+        activeOpacity={0.8}>
+        <IconSymbol
+          name="chevron.right"
+          size={18}
+          weight="medium"
+          color={theme === 'light' ? Colors.light.icon : Colors.dark.icon}
+          style={{ transform: [{ rotate: isOpen ? '90deg' : '0deg' }] }}
+        />
+
+        <ThemedText type="defaultSemiBold">{title}</ThemedText>
+      </TouchableOpacity>
+      {isOpen && <ThemedView style={styles.content}>{children}</ThemedView>}
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  heading: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  content: {
+    marginTop: 6,
+    marginLeft: 24,
+  },
+});

components/ui/icon-symbol.ios.tsx

@@ -0,0 +1,32 @@
+import { SymbolView, SymbolViewProps, SymbolWeight } from 'expo-symbols';
+import { StyleProp, ViewStyle } from 'react-native';
+
+export function IconSymbol({
+  name,
+  size = 24,
+  color,
+  style,
+  weight = 'regular',
+}: {
+  name: SymbolViewProps['name'];
+  size?: number;
+  color: string;
+  style?: StyleProp<ViewStyle>;
+  weight?: SymbolWeight;
+}) {
+  return (
+    <SymbolView
+      weight={weight}
+      tintColor={color}
+      resizeMode="scaleAspectFit"
+      name={name}
+      style={[
+        {
+          width: size,
+          height: size,
+        },
+        style,
+      ]}
+    />
+  );
+}

components/ui/icon-symbol.tsx

@@ -0,0 +1,61 @@
+// Fallback for using MaterialIcons on Android and web.
+
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import { SymbolViewProps, SymbolWeight } from "expo-symbols";
+import { ComponentProps } from "react";
+import { OpaqueColorValue, type StyleProp, type TextStyle } from "react-native";
+
+type IconMapping = Record<
+  SymbolViewProps["name"],
+  ComponentProps<typeof MaterialIcons>["name"]
+>;
+type IconSymbolName = keyof typeof MAPPING;
+
+/**
+ * Add your SF Symbols to Material Icons mappings here.
+ * - see Material Icons in the [Icons Directory](https://icons.expo.fyi).
+ * - see SF Symbols in the [SF Symbols](https://developer.apple.com/sf-symbols/) app.
+ */
+const MAPPING = {
+  gear: "settings",
+  "paperplane.fill": "send",
+  "chevron.left.forwardslash.chevron.right": "code",
+  "chevron.right": "chevron-right",
+  "ferry.fill": "directions-boat",
+  "map.fill": "map",
+  "chevron.down": "arrow-drop-down",
+  "chevron.up": "arrow-drop-up",
+  "exclamationmark.triangle.fill": "warning",
+  "book.closed.fill": "book",
+  "dot.radiowaves.left.and.right": "sensors",
+  xmark: "close",
+  pencil: "edit",
+  trash: "delete",
+} as IconMapping;
+
+/**
+ * An icon component that uses native SF Symbols on iOS, and Material Icons on Android and web.
+ * This ensures a consistent look across platforms, and optimal resource usage.
+ * Icon `name`s are based on SF Symbols and require manual mapping to Material Icons.
+ */
+export function IconSymbol({
+  name,
+  size = 24,
+  color,
+  style,
+}: {
+  name: IconSymbolName;
+  size?: number;
+  color: string | OpaqueColorValue;
+  style?: StyleProp<TextStyle>;
+  weight?: SymbolWeight;
+}) {
+  return (
+    <MaterialIcons
+      color={color}
+      size={size}
+      name={MAPPING[name]}
+      style={style}
+    />
+  );
+}

components/ui/modal.tsx

@@ -0,0 +1,578 @@
+import { Ionicons } from "@expo/vector-icons";
+import React, { ReactNode, useEffect, useState } from "react";
+import {
+  ActivityIndicator,
+  Dimensions,
+  Pressable,
+  Modal as RNModal,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+
+// Types
+export interface ModalProps {
+  /** Whether the modal dialog is visible or not */
+  open?: boolean;
+  /** The modal dialog's title */
+  title?: ReactNode;
+  /** Whether a close (x) button is visible on top right or not */
+  closable?: boolean;
+  /** Custom close icon */
+  closeIcon?: ReactNode;
+  /** Whether to close the modal dialog when the mask (area outside the modal) is clicked */
+  maskClosable?: boolean;
+  /** Centered Modal */
+  centered?: boolean;
+  /** Width of the modal dialog */
+  width?: number | string;
+  /** Whether to apply loading visual effect for OK button or not */
+  confirmLoading?: boolean;
+  /** Text of the OK button */
+  okText?: string;
+  /** Text of the Cancel button */
+  cancelText?: string;
+  /** Button type of the OK button */
+  okType?: "primary" | "default" | "dashed" | "text" | "link";
+  /** Footer content, set as footer={null} when you don't need default buttons */
+  footer?: ReactNode | null;
+  /** Whether show mask or not */
+  mask?: boolean;
+  /** The z-index of the Modal */
+  zIndex?: number;
+  /** Specify a function that will be called when a user clicks the OK button */
+  onOk?: (e?: any) => void | Promise<void>;
+  /** Specify a function that will be called when a user clicks mask, close button on top right or Cancel button */
+  onCancel?: (e?: any) => void;
+  /** Callback when the animation ends when Modal is turned on and off */
+  afterOpenChange?: (open: boolean) => void;
+  /** Specify a function that will be called when modal is closed completely */
+  afterClose?: () => void;
+  /** Custom className */
+  className?: string;
+  /** Modal body content */
+  children?: ReactNode;
+  /** Whether to unmount child components on close */
+  destroyOnClose?: boolean;
+  /** The ok button props */
+  okButtonProps?: any;
+  /** The cancel button props */
+  cancelButtonProps?: any;
+  /** Whether support press esc to close */
+  keyboard?: boolean;
+}
+
+export interface ConfirmModalProps extends Omit<ModalProps, "open"> {
+  /** Type of the confirm modal */
+  type?: "info" | "success" | "error" | "warning" | "confirm";
+  /** Content */
+  content?: ReactNode;
+  /** Custom icon */
+  icon?: ReactNode;
+}
+
+// Modal Component
+const Modal: React.FC<ModalProps> & {
+  info: (props: ConfirmModalProps) => ModalInstance;
+  success: (props: ConfirmModalProps) => ModalInstance;
+  error: (props: ConfirmModalProps) => ModalInstance;
+  warning: (props: ConfirmModalProps) => ModalInstance;
+  confirm: (props: ConfirmModalProps) => ModalInstance;
+  useModal: () => [
+    {
+      info: (props: ConfirmModalProps) => ModalInstance;
+      success: (props: ConfirmModalProps) => ModalInstance;
+      error: (props: ConfirmModalProps) => ModalInstance;
+      warning: (props: ConfirmModalProps) => ModalInstance;
+      confirm: (props: ConfirmModalProps) => ModalInstance;
+    },
+    ReactNode
+  ];
+} = ({
+  open = false,
+  title,
+  closable = true,
+  closeIcon,
+  maskClosable = true,
+  centered = false,
+  width = 520,
+  confirmLoading = false,
+  okText = "OK",
+  cancelText = "Cancel",
+  okType = "primary",
+  footer,
+  mask = true,
+  zIndex = 1000,
+  onOk,
+  onCancel,
+  afterOpenChange,
+  afterClose,
+  className,
+  children,
+  destroyOnClose = false,
+  okButtonProps,
+  cancelButtonProps,
+  keyboard = true,
+}) => {
+  const [visible, setVisible] = useState(open);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    setVisible(open);
+    if (afterOpenChange) {
+      afterOpenChange(open);
+    }
+  }, [open, afterOpenChange]);
+
+  const handleOk = async () => {
+    if (onOk) {
+      setLoading(true);
+      try {
+        await onOk();
+        // Không tự động đóng modal - để parent component quyết định
+      } catch (error) {
+        console.error("Modal onOk error:", error);
+      } finally {
+        setLoading(false);
+      }
+    } else {
+      setVisible(false);
+    }
+  };
+
+  const handleCancel = () => {
+    if (onCancel) {
+      onCancel();
+    } else {
+      // Nếu không có onCancel, tự động đóng modal
+      setVisible(false);
+    }
+  };
+
+  const handleMaskPress = () => {
+    if (maskClosable) {
+      handleCancel();
+    }
+  };
+
+  const handleRequestClose = () => {
+    if (keyboard) {
+      handleCancel();
+    }
+  };
+
+  useEffect(() => {
+    if (!visible && afterClose) {
+      const timer = setTimeout(() => {
+        afterClose();
+      }, 300); // Wait for animation to complete
+      return () => clearTimeout(timer);
+    }
+  }, [visible, afterClose]);
+
+  const renderFooter = () => {
+    if (footer === null) {
+      return null;
+    }
+
+    if (footer !== undefined) {
+      return <View style={styles.footer}>{footer}</View>;
+    }
+
+    return (
+      <View style={styles.footer}>
+        <TouchableOpacity
+          style={[styles.button, styles.cancelButton]}
+          onPress={handleCancel}
+          disabled={loading || confirmLoading}
+          {...cancelButtonProps}
+        >
+          <Text style={styles.cancelButtonText}>{cancelText}</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={[
+            styles.button,
+            styles.okButton,
+            okType === "primary" && styles.primaryButton,
+            (loading || confirmLoading) && styles.disabledButton,
+          ]}
+          onPress={handleOk}
+          disabled={loading || confirmLoading}
+          {...okButtonProps}
+        >
+          {loading || confirmLoading ? (
+            <ActivityIndicator color="#fff" size="small" />
+          ) : (
+            <Text style={styles.okButtonText}>{okText}</Text>
+          )}
+        </TouchableOpacity>
+      </View>
+    );
+  };
+
+  const modalWidth =
+    typeof width === "number" ? width : Dimensions.get("window").width * 0.9;
+
+  return (
+    <RNModal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={handleRequestClose}
+      statusBarTranslucent
+    >
+      <Pressable
+        style={[
+          styles.overlay,
+          centered && styles.centered,
+          { zIndex },
+          !mask && styles.noMask,
+        ]}
+        onPress={handleMaskPress}
+      >
+        <Pressable
+          style={[styles.modal, { width: modalWidth, maxWidth: "90%" }]}
+          onPress={(e) => e.stopPropagation()}
+        >
+          {/* Header */}
+          {(title || closable) && (
+            <View style={styles.header}>
+              {title && (
+                <Text style={styles.title} numberOfLines={1}>
+                  {title}
+                </Text>
+              )}
+              {closable && (
+                <TouchableOpacity
+                  style={styles.closeButton}
+                  onPress={handleCancel}
+                  hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                >
+                  {closeIcon || (
+                    <Ionicons name="close" size={24} color="#666" />
+                  )}
+                </TouchableOpacity>
+              )}
+            </View>
+          )}
+
+          {/* Body */}
+          <View style={styles.body}>
+            {(!destroyOnClose || visible) && children}
+          </View>
+
+          {/* Footer */}
+          {renderFooter()}
+        </Pressable>
+      </Pressable>
+    </RNModal>
+  );
+};
+
+// Confirm Modal Component
+const ConfirmModal: React.FC<
+  ConfirmModalProps & { visible: boolean; onClose: () => void }
+> = ({
+  visible,
+  onClose,
+  type = "confirm",
+  title,
+  content,
+  icon,
+  okText = "OK",
+  cancelText = "Cancel",
+  onOk,
+  onCancel,
+  ...restProps
+}) => {
+  const [loading, setLoading] = useState(false);
+
+  const getIcon = () => {
+    if (icon !== undefined) return icon;
+
+    const iconProps = { size: 24, style: { marginRight: 12 } };
+    switch (type) {
+      case "info":
+        return (
+          <Ionicons name="information-circle" color="#1890ff" {...iconProps} />
+        );
+      case "success":
+        return (
+          <Ionicons name="checkmark-circle" color="#52c41a" {...iconProps} />
+        );
+      case "error":
+        return <Ionicons name="close-circle" color="#ff4d4f" {...iconProps} />;
+      case "warning":
+        return <Ionicons name="warning" color="#faad14" {...iconProps} />;
+      default:
+        return <Ionicons name="help-circle" color="#1890ff" {...iconProps} />;
+    }
+  };
+
+  const handleOk = async () => {
+    if (onOk) {
+      setLoading(true);
+      try {
+        await onOk();
+        onClose();
+      } catch (error) {
+        console.error("Confirm modal onOk error:", error);
+      } finally {
+        setLoading(false);
+      }
+    } else {
+      onClose();
+    }
+  };
+
+  const handleCancel = () => {
+    if (onCancel) {
+      onCancel();
+    }
+    onClose();
+  };
+
+  return (
+    <Modal
+      open={visible}
+      title={title}
+      onOk={handleOk}
+      onCancel={type === "confirm" ? handleCancel : undefined}
+      okText={okText}
+      cancelText={cancelText}
+      confirmLoading={loading}
+      footer={
+        type === "confirm" ? undefined : (
+          <View style={styles.footer}>
+            <TouchableOpacity
+              style={[styles.button, styles.okButton, styles.primaryButton]}
+              onPress={handleOk}
+              disabled={loading}
+            >
+              {loading ? (
+                <ActivityIndicator color="#fff" size="small" />
+              ) : (
+                <Text style={styles.okButtonText}>{okText}</Text>
+              )}
+            </TouchableOpacity>
+          </View>
+        )
+      }
+      {...restProps}
+    >
+      <View style={styles.confirmContent}>
+        {getIcon()}
+        <Text style={styles.confirmText}>{content}</Text>
+      </View>
+    </Modal>
+  );
+};
+
+// Modal Instance
+export interface ModalInstance {
+  destroy: () => void;
+  update: (config: ConfirmModalProps) => void;
+}
+
+// Container for imperatively created modals - Not used in React Native
+// Static methods will return instance but won't render imperatively
+// Use Modal.useModal() hook for proper context support
+
+const createConfirmModal = (config: ConfirmModalProps): ModalInstance => {
+  console.warn(
+    "Modal static methods are not fully supported in React Native. Please use Modal.useModal() hook for better context support."
+  );
+
+  return {
+    destroy: () => {
+      console.warn(
+        "Modal.destroy() called but static modals are not supported in React Native"
+      );
+    },
+    update: (newConfig: ConfirmModalProps) => {
+      console.warn(
+        "Modal.update() called but static modals are not supported in React Native"
+      );
+    },
+  };
+};
+
+// Static methods
+Modal.info = (props: ConfirmModalProps) =>
+  createConfirmModal({ ...props, type: "info" });
+Modal.success = (props: ConfirmModalProps) =>
+  createConfirmModal({ ...props, type: "success" });
+Modal.error = (props: ConfirmModalProps) =>
+  createConfirmModal({ ...props, type: "error" });
+Modal.warning = (props: ConfirmModalProps) =>
+  createConfirmModal({ ...props, type: "warning" });
+Modal.confirm = (props: ConfirmModalProps) =>
+  createConfirmModal({ ...props, type: "confirm" });
+
+// useModal hook
+Modal.useModal = () => {
+  const [modals, setModals] = useState<ReactNode[]>([]);
+
+  const createModal = (
+    config: ConfirmModalProps,
+    type: ConfirmModalProps["type"]
+  ) => {
+    const id = `modal-${Date.now()}-${Math.random()}`;
+
+    const destroy = () => {
+      setModals((prev) => prev.filter((modal: any) => modal.key !== id));
+    };
+
+    const update = (newConfig: ConfirmModalProps) => {
+      setModals((prev) =>
+        prev.map((modal: any) =>
+          modal.key === id ? (
+            <ConfirmModal
+              key={id}
+              visible={true}
+              onClose={destroy}
+              {...config}
+              {...newConfig}
+              type={type}
+            />
+          ) : (
+            modal
+          )
+        )
+      );
+    };
+
+    const modalElement = (
+      <ConfirmModal
+        key={id}
+        visible={true}
+        onClose={destroy}
+        {...config}
+        type={type}
+      />
+    );
+
+    setModals((prev) => [...prev, modalElement]);
+
+    return { destroy, update };
+  };
+
+  const modalMethods = {
+    info: (props: ConfirmModalProps) => createModal(props, "info"),
+    success: (props: ConfirmModalProps) => createModal(props, "success"),
+    error: (props: ConfirmModalProps) => createModal(props, "error"),
+    warning: (props: ConfirmModalProps) => createModal(props, "warning"),
+    confirm: (props: ConfirmModalProps) => createModal(props, "confirm"),
+  };
+
+  const contextHolder = <>{modals}</>;
+
+  return [modalMethods, contextHolder];
+};
+
+// Styles
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.45)",
+    justifyContent: "flex-start",
+    paddingTop: 100,
+    alignItems: "center",
+  },
+  centered: {
+    justifyContent: "center",
+    paddingTop: 0,
+  },
+  noMask: {
+    backgroundColor: "transparent",
+  },
+  modal: {
+    backgroundColor: "#fff",
+    borderRadius: 8,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    elevation: 8,
+    maxHeight: "90%",
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 24,
+    paddingTop: 20,
+    paddingBottom: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: "#f0f0f0",
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "#000",
+    flex: 1,
+  },
+  closeButton: {
+    padding: 4,
+    marginLeft: 12,
+  },
+  body: {
+    paddingHorizontal: 24,
+    paddingVertical: 20,
+  },
+  footer: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    paddingHorizontal: 24,
+    paddingBottom: 20,
+    paddingTop: 12,
+    gap: 8,
+  },
+  button: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    borderRadius: 6,
+    minWidth: 70,
+    alignItems: "center",
+    justifyContent: "center",
+    height: 36,
+  },
+  cancelButton: {
+    backgroundColor: "#fff",
+    borderWidth: 1,
+    borderColor: "#d9d9d9",
+  },
+  cancelButtonText: {
+    color: "#000",
+    fontSize: 14,
+    fontWeight: "500",
+  },
+  okButton: {
+    backgroundColor: "#1890ff",
+  },
+  primaryButton: {
+    backgroundColor: "#1890ff",
+  },
+  okButtonText: {
+    color: "#fff",
+    fontSize: 14,
+    fontWeight: "500",
+  },
+  disabledButton: {
+    opacity: 0.6,
+  },
+  confirmContent: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+  },
+  confirmText: {
+    flex: 1,
+    fontSize: 14,
+    color: "#000",
+    lineHeight: 22,
+  },
+});
+
+export default Modal;

components/ui/slice-switch.tsx

@@ -0,0 +1,262 @@
+import { Ionicons } from "@expo/vector-icons";
+import type { ComponentProps } from "react";
+import { useEffect, useRef, useState } from "react";
+import {
+  Animated,
+  OpaqueColorValue,
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from "react-native";
+
+const SIZE_PRESETS = {
+  sm: { width: 64, height: 32 },
+  md: { width: 80, height: 40 },
+  lg: { width: 96, height: 48 },
+} as const;
+
+type SwitchSize = keyof typeof SIZE_PRESETS;
+
+const DEFAULT_TOGGLE_DURATION = 400;
+
+// Default both backgrounds to a grey tone when not provided
+const DEFAULT_INACTIVE_BG = "#D3DAD9";
+const DEFAULT_ACTIVE_BG = "#D3DAD9";
+const PRESSED_SCALE = 0.96;
+const PRESS_FEEDBACK_DURATION = 120;
+
+type IoniconName = ComponentProps<typeof Ionicons>["name"];
+
+type SliceSwitchProps = {
+  size?: SwitchSize;
+  leftIcon?: IoniconName;
+  leftIconColor?: string | OpaqueColorValue | undefined;
+  rightIconColor?: string | OpaqueColorValue | undefined;
+  rightIcon?: IoniconName;
+  duration?: number;
+  activeBackgroundColor?: string;
+  inactiveBackgroundColor?: string;
+  inactiveOverlayColor?: string;
+  activeOverlayColor?: string;
+  style?: StyleProp<ViewStyle>;
+  onChange?: (value: boolean) => void;
+  value?: boolean;
+};
+
+const SliceSwitch = ({
+  size = "md",
+  leftIcon,
+  rightIcon,
+  duration,
+  activeBackgroundColor = DEFAULT_ACTIVE_BG,
+  inactiveBackgroundColor = DEFAULT_INACTIVE_BG,
+  leftIconColor = "#fff",
+  rightIconColor = "#fff",
+  inactiveOverlayColor = "#000",
+  activeOverlayColor = "#000",
+  style,
+  onChange,
+  value,
+}: SliceSwitchProps) => {
+  const { width: containerWidth, height: containerHeight } =
+    SIZE_PRESETS[size] ?? SIZE_PRESETS.md;
+  const animationDuration = Math.max(duration ?? DEFAULT_TOGGLE_DURATION, 0);
+  const [isOn, setIsOn] = useState(value ?? false);
+  const [bgOn, setBgOn] = useState(value ?? false);
+  const progress = useRef(new Animated.Value(value ? 1 : 0)).current;
+  const pressScale = useRef(new Animated.Value(1)).current;
+  const overlayTranslateX = useRef(
+    new Animated.Value(value ? containerWidth / 2 : 0)
+  ).current;
+  const listenerIdRef = useRef<string | number | null>(null);
+
+  // Sync with external value prop if provided
+  useEffect(() => {
+    if (value !== undefined && value !== isOn) {
+      animateToValue(value);
+    }
+  }, [value]);
+
+  const animateToValue = (next: boolean) => {
+    const targetValue = next ? 1 : 0;
+    const overlayTarget = next ? containerWidth / 2 : 0;
+
+    progress.stopAnimation();
+    overlayTranslateX.stopAnimation();
+
+    if (animationDuration <= 0) {
+      progress.setValue(targetValue);
+      overlayTranslateX.setValue(overlayTarget);
+      setIsOn(next);
+      setBgOn(next);
+      return;
+    }
+
+    setIsOn(next);
+
+    Animated.parallel([
+      Animated.timing(progress, {
+        toValue: targetValue,
+        duration: animationDuration,
+        useNativeDriver: true,
+      }),
+      Animated.timing(overlayTranslateX, {
+        toValue: overlayTarget,
+        duration: animationDuration,
+        useNativeDriver: true,
+      }),
+    ]).start(() => {
+      setBgOn(next);
+    });
+
+    // Remove any previous listener
+    if (listenerIdRef.current != null) {
+      progress.removeListener(listenerIdRef.current as string);
+      listenerIdRef.current = null;
+    }
+
+    // Swap image & background exactly at 50% progress
+    let swapped = false;
+    listenerIdRef.current = progress.addListener(({ value }) => {
+      if (swapped) return;
+      if (next && value >= 0.5) {
+        swapped = true;
+        setBgOn(next);
+        if (listenerIdRef.current != null) {
+          progress.removeListener(listenerIdRef.current as string);
+          listenerIdRef.current = null;
+        }
+      }
+      if (!next && value <= 0.5) {
+        swapped = true;
+        setBgOn(next);
+        if (listenerIdRef.current != null) {
+          progress.removeListener(listenerIdRef.current as string);
+          listenerIdRef.current = null;
+        }
+      }
+    });
+  };
+
+  const handleToggle = () => {
+    const next = !isOn;
+    if (value === undefined) {
+      animateToValue(next);
+    }
+    onChange?.(next);
+  };
+
+  const handlePressIn = () => {
+    pressScale.stopAnimation();
+    Animated.timing(pressScale, {
+      toValue: PRESSED_SCALE,
+      duration: PRESS_FEEDBACK_DURATION,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const handlePressOut = () => {
+    pressScale.stopAnimation();
+    Animated.timing(pressScale, {
+      toValue: 1,
+      duration: PRESS_FEEDBACK_DURATION,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  return (
+    <Pressable
+      onPress={handleToggle}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      accessibilityRole="switch"
+      accessibilityState={{ checked: isOn }}
+      style={[styles.pressable, style]}
+    >
+      <Animated.View
+        style={[
+          styles.shadowWrapper,
+          {
+            transform: [{ scale: pressScale }],
+            width: containerWidth,
+            height: containerHeight,
+            borderRadius: containerHeight / 2,
+          },
+        ]}
+      >
+        <View
+          style={[
+            styles.container,
+            {
+              flexDirection: "row",
+              justifyContent: "space-between",
+              borderRadius: containerHeight / 2,
+              backgroundColor: bgOn
+                ? activeBackgroundColor
+                : inactiveBackgroundColor,
+            },
+          ]}
+        >
+          <Animated.View
+            style={{
+              position: "absolute",
+              width: containerWidth / 2,
+              height: containerHeight * 0.95,
+              top: containerHeight * 0.01,
+              left: 0,
+              borderRadius: containerHeight * 0.95 / 2,
+              zIndex: 10,
+              backgroundColor: bgOn ? activeOverlayColor : inactiveOverlayColor,
+              transform: [{ translateX: overlayTranslateX }],
+            }}
+          />
+          <View className="h-full w-1/2 items-center justify-center ">
+            <Ionicons
+              name={leftIcon ?? "sunny"}
+              size={20}
+              color={leftIconColor ?? "#fff"}
+            />
+          </View>
+          <View className="h-full  w-1/2 items-center justify-center ">
+            <Ionicons
+              name={rightIcon ?? "moon"}
+              size={20}
+              color={rightIconColor ?? "#fff"}
+            />
+          </View>
+        </View>
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  pressable: {
+    alignSelf: "flex-start",
+  },
+  shadowWrapper: {
+    justifyContent: "center",
+    position: "relative",
+    shadowColor: "#000",
+    shadowOpacity: 0.15,
+    shadowOffset: { width: 0, height: 4 },
+    shadowRadius: 6,
+    elevation: 6,
+    backgroundColor: "transparent",
+  },
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    position: "relative",
+    overflow: "hidden",
+  },
+  knob: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+  },
+});
+
+export default SliceSwitch;