thêm giao diện quản lý thuyền

app/(tabs)/_layout.tsx

@@ -3,8 +3,10 @@ import { Tabs, useSegments } from "expo-router";
 import { HapticTab } from "@/components/haptic-tab";
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { Colors } from "@/constants/theme";
+import { queryProfile } from "@/controller/AuthController";
 import { useI18n } from "@/hooks/use-i18n";
 import { useColorScheme } from "@/hooks/use-theme-context";
+import { addUserStorage } from "@/utils/storage";
 import { useEffect, useRef } from "react";
 
 export default function TabLayout() {
@@ -29,6 +31,23 @@ export default function TabLayout() {
     }
   }, [currentSegment]);
 
+  useEffect(() => {
+    const getUserProfile = async () => {
+      try {
+        const resp = await queryProfile();
+        if (resp.data && resp.status === 200) {
+          await addUserStorage(
+            resp.data.id || "",
+            resp.data.metadata?.user_type || ""
+          );
+        }
+      } catch (error) {
+        console.error("Error when get Profile: ", error);
+      }
+    };
+    getUserProfile();
+  }, []);
+
   return (
     <Tabs
       screenOptions={{

app/(tabs)/manager.tsx

@@ -1,35 +1,178 @@
-import { Platform, ScrollView, StyleSheet, Text, View } from "react-native";
+import DevicesScreen from "@/components/manager/devices";
+import FleetsScreen from "@/components/manager/fleets";
+import ShipsScreen from "@/components/manager/ships";
+import { ThemedText } from "@/components/themed-text";
+import { ThemedView } from "@/components/themed-view";
+import { Colors } from "@/config";
+import { ColorScheme, useTheme } from "@/hooks/use-theme-context";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Animated, StyleSheet, TouchableOpacity, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 
 export default function manager() {
+  const { colors, colorScheme } = useTheme();
+  const styles = useMemo(
+    () => createStyles(colors, colorScheme),
+    [colors, colorScheme]
+  );
+
+  const [selected, setSelected] = useState<"ships" | "devices" | "fleets">(
+    "ships"
+  );
+  const [containerWidth, setContainerWidth] = useState(0);
+  const indicatorTranslate = useRef(new Animated.Value(0)).current;
+  const SEGMENT_COUNT = 3;
+  const indexMap: Record<string, number> = {
+    ships: 0,
+    devices: 1,
+    fleets: 2,
+  };
+
+  const SegmentButton = ({
+    label,
+    active,
+    onPress,
+  }: {
+    label: string;
+    active?: boolean;
+    onPress?: () => void;
+  }) => {
+    return (
+      <TouchableOpacity
+        style={[styles.segmentButton, active && styles.segmentButtonActive]}
+        onPress={onPress}
+        activeOpacity={0.8}
+      >
+        <ThemedText
+          style={[styles.segmentText, active && styles.segmentTextActive]}
+        >
+          {label}
+        </ThemedText>
+      </TouchableOpacity>
+    );
+  };
+
+  useEffect(() => {
+    if (containerWidth <= 0) return;
+    const segmentWidth = containerWidth / SEGMENT_COUNT;
+    const toValue = indexMap[selected] * segmentWidth;
+    Animated.spring(indicatorTranslate, {
+      toValue,
+      useNativeDriver: true,
+      friction: 14,
+      tension: 100,
+    }).start();
+  }, [selected, containerWidth, indicatorTranslate]);
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <SafeAreaView style={{ flex: 1 }} edges={["top"]}>
-      <ScrollView contentContainerStyle={styles.scrollContent}>
+      <ThemedView style={styles.scrollContent}>
         <View style={styles.container}>
-          <Text style={styles.titleText}>Quản lý tàu </Text>
+          <ThemedView style={styles.header}>
+            <View
+              style={styles.segmentContainer}
+              onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
+            >
+              {/* sliding indicator */}
+              {containerWidth > 0 && (
+                <Animated.View
+                  style={[
+                    styles.indicator,
+                    {
+                      width: Math.max(containerWidth / SEGMENT_COUNT - 8, 0),
+                      transform: [{ translateX: indicatorTranslate }],
+                    },
+                  ]}
+                />
+              )}
+
+              <SegmentButton
+                label="Tàu"
+                active={selected === "ships"}
+                onPress={() => setSelected("ships")}
+              />
+              <SegmentButton
+                label="Thiết bị"
+                active={selected === "devices"}
+                onPress={() => setSelected("devices")}
+              />
+              <SegmentButton
+                label="Đội tàu"
+                active={selected === "fleets"}
+                onPress={() => setSelected("fleets")}
+              />
+            </View>
+          </ThemedView>
+
+          <View style={styles.contentWrapper}>
+            {selected === "ships" && <ShipsScreen />}
+            {selected === "devices" && <DevicesScreen />}
+            {selected === "fleets" && <FleetsScreen />}
+          </View>
         </View>
-      </ScrollView>
+      </ThemedView>
     </SafeAreaView>
   );
 }
 
-const styles = StyleSheet.create({
+const createStyles = (colors: typeof Colors.light, scheme: ColorScheme) =>
-  scrollContent: {
+  StyleSheet.create({
-    flexGrow: 1,
+    scrollContent: {
-  },
+      flexGrow: 1,
-  container: {
+    },
-    alignItems: "center",
+    container: {
-    padding: 15,
+      alignItems: "center",
-  },
+      flex: 1,
-  titleText: {
+    },
-    fontSize: 32,
+
-    fontWeight: "700",
+    header: {
-    lineHeight: 40,
+      width: "100%",
-    marginBottom: 30,
+      paddingVertical: 8,
-    fontFamily: Platform.select({
+      paddingHorizontal: 4,
-      ios: "System",
+    },
-      android: "Roboto",
+    segmentContainer: {
-      default: "System",
+      flexDirection: "row",
-    }),
+      backgroundColor: colors.backgroundSecondary,
-  },
+      borderRadius: 10,
-});
+      padding: 4,
+      alignSelf: "stretch",
+    },
+    segmentButton: {
+      flex: 1,
+      paddingVertical: 8,
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: 8,
+    },
+    segmentButtonActive: {
+      backgroundColor: scheme === "dark" ? "#435B66" : colors.surface,
+      shadowColor: scheme === "dark" ? "transparent" : "#000",
+      shadowOpacity: scheme === "dark" ? 0 : 0.1,
+      shadowRadius: 4,
+      elevation: scheme === "dark" ? 0 : 2,
+    },
+    segmentText: {
+      fontSize: 14,
+      fontWeight: "600",
+      color: colors.textSecondary,
+    },
+    segmentTextActive: {
+      color: colors.text,
+    },
+    indicator: {
+      position: "absolute",
+      left: 4,
+      top: 4,
+      bottom: 4,
+      backgroundColor: scheme === "dark" ? "#435B66" : colors.surface,
+      borderRadius: 8,
+      shadowColor: scheme === "dark" ? "transparent" : "#000",
+      shadowOpacity: scheme === "dark" ? 0 : 0.1,
+      shadowRadius: 4,
+      elevation: scheme === "dark" ? 0 : 2,
+    },
+    contentWrapper: {
+      flex: 1,
+      alignSelf: "stretch",
+      width: "100%",
+    },
+  });

app/(tabs)/tripInfo.tsx

@@ -1,83 +0,0 @@
-// import ButtonCancelTrip from "@/components/ButtonCancelTrip";
-// import ButtonCreateNewHaulOrTrip from "@/components/ButtonCreateNewHaulOrTrip";
-// import ButtonEndTrip from "@/components/ButtonEndTrip";
-// import CrewListTable from "@/components/tripInfo/CrewListTable";
-// import FishingToolsTable from "@/components/tripInfo/FishingToolsList";
-// import NetListTable from "@/components/tripInfo/NetListTable";
-// import TripCostTable from "@/components/tripInfo/TripCostTable";
-// import { useI18n } from "@/hooks/use-i18n";
-// import { useThemeContext } from "@/hooks/use-theme-context";
-// import { Platform, ScrollView, StyleSheet, Text, View } from "react-native";
-// import { SafeAreaView } from "react-native-safe-area-context";
-
-// export default function TripInfoScreen() {
-//   const { t } = useI18n();
-//   const { colors } = useThemeContext();
-//   return (
-//     <SafeAreaView style={styles.safeArea} edges={["top", "left", "right"]}>
-//       <View style={styles.header}>
-//         <Text style={[styles.titleText, { color: colors.text }]}>
-//           {t("trip.infoTrip")}
-//         </Text>
-//         <View style={styles.buttonWrapper}>
-//           <ButtonCreateNewHaulOrTrip />
-//         </View>
-//       </View>
-//       <ScrollView contentContainerStyle={styles.scrollContent}>
-//         <View style={styles.container}>
-//           <TripCostTable />
-//           <FishingToolsTable />
-//           <CrewListTable />
-//           <NetListTable />
-//           <View style={styles.buttonRow}>
-//             <ButtonCancelTrip />
-//             <ButtonEndTrip />
-//           </View>
-//         </View>
-//       </ScrollView>
-//     </SafeAreaView>
-//   );
-// }
-
-// const styles = StyleSheet.create({
-//   safeArea: {
-//     flex: 1,
-//     paddingBottom: 5,
-//   },
-//   scrollContent: {
-//     flexGrow: 1,
-//   },
-//   header: {
-//     width: "100%",
-//     paddingHorizontal: 15,
-//     paddingTop: 15,
-//     paddingBottom: 10,
-//     alignItems: "center",
-//   },
-//   buttonWrapper: {
-//     width: "100%",
-//     flexDirection: "row",
-//     justifyContent: "flex-end",
-//   },
-//   container: {
-//     alignItems: "center",
-//     paddingHorizontal: 15,
-//   },
-//   buttonRow: {
-//     flexDirection: "row",
-//     gap: 10,
-//     marginTop: 15,
-//     marginBottom: 15,
-//   },
-//   titleText: {
-//     fontSize: 32,
-//     fontWeight: "700",
-//     lineHeight: 40,
-//     paddingBottom: 10,
-//     fontFamily: Platform.select({
-//       ios: "System",
-//       android: "Roboto",
-//       default: "System",
-//     }),
-//   },
-// });

components/ShipSearchForm.tsx

@@ -1,6 +1,6 @@
 import { Colors } from "@/config";
-import { queryShipGroups } from "@/controller/DeviceController";
 import { ColorScheme, useTheme } from "@/hooks/use-theme-context";
+import { useShipGroups } from "@/state/use-ship-groups";
 import { useShipTypes } from "@/state/use-ship-types";
 import { useEffect, useMemo, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
@@ -44,8 +44,8 @@ const ShipSearchForm = (props: ShipSearchFormProps) => {
     [colors, colorScheme]
   );
   const { shipTypes, getShipTypes } = useShipTypes();
-  const [groupShips, setGroupShips] = useState<Model.ShipGroup[]>([]);
   const [slideAnim] = useState(new Animated.Value(0));
+  const { shipGroups, getShipGroups } = useShipGroups();
 
   const { control, handleSubmit, reset, watch } = useForm<SearchShipResponse>({
     defaultValues: {
@@ -70,8 +70,10 @@ const ShipSearchForm = (props: ShipSearchFormProps) => {
   }, [shipTypes]);
 
   useEffect(() => {
-    getShipGroups();
+    if (shipGroups === null) {
-  }, []);
+      getShipGroups();
+    }
+  }, [props.isOpen]);
 
   useEffect(() => {
     if (props.isOpen) {
@@ -107,17 +109,6 @@ const ShipSearchForm = (props: ShipSearchFormProps) => {
     }
   }, [props.initialValues]);
 
-  const getShipGroups = async () => {
-    try {
-      const response = await queryShipGroups();
-      if (response && response.data) {
-        setGroupShips(response.data);
-      }
-    } catch (error) {
-      console.error("Error fetching ship groups:", error);
-    }
-  };
-
   const alarmListLabel = [
     {
       label: "Tiếp cận vùng hạn chế",
@@ -366,10 +357,12 @@ const ShipSearchForm = (props: ShipSearchFormProps) => {
                     name="ship_group_id"
                     render={({ field: { onChange, value } }) => (
                       <Select
-                        options={groupShips.map((group) => ({
+                        options={
-                          label: group.name || "",
+                          shipGroups?.map((group) => ({
-                          value: group.id || "",
+                            label: group.name || "",
-                        }))}
+                            value: group.id || "",
+                          })) || []
+                        }
                         placeholder="Chọn đội tàu"
                         mode="multiple"
                         value={value}

components/manager/devices.tsx

@@ -0,0 +1,16 @@
+import { ThemedText } from "@/components/themed-text";
+import { ThemedView } from "@/components/themed-view";
+import { StyleSheet } from "react-native";
+
+export default function DevicesScreen() {
+  console.log("Gọi API 2");
+  return (
+    <ThemedView style={styles.container}>
+      <ThemedText>Quản lý thiết bị</ThemedText>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+});

components/manager/fleets.tsx

@@ -0,0 +1,17 @@
+import { ThemedText } from "@/components/themed-text";
+import { ThemedView } from "@/components/themed-view";
+import { StyleSheet } from "react-native";
+
+export default function FleetsScreen() {
+  console.log("Gọi API 3");
+
+  return (
+    <ThemedView style={styles.container}>
+      <ThemedText>Quản lý đội tàu</ThemedText>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+});

components/manager/ship_components/CreateOrUpdateShip.tsx

@@ -0,0 +1,847 @@
+import Select, { SelectOption } from "@/components/Select";
+import { ThemedText } from "@/components/themed-text";
+import { Colors } from "@/config";
+import { ColorScheme, useTheme } from "@/hooks/use-theme-context";
+import { usePort } from "@/state/use-ports";
+import { useShipGroups } from "@/state/use-ship-groups";
+import { useShipTypes } from "@/state/use-ship-types";
+import { useThings } from "@/state/use-thing";
+import DateTimePicker from "@react-native-community/datetimepicker";
+import { useEffect, useMemo, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import {
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+interface CreateOrUpdateShipProps {
+  initialValue?: Model.ShipBodyRequest;
+  isOpen?: boolean;
+  type?: "create" | "update";
+  onSubmit?: (data: Model.ShipBodyRequest) => void;
+  onClose?: () => void;
+}
+
+const CreateOrUpdateShip = (props: CreateOrUpdateShipProps) => {
+  const { colors, colorScheme } = useTheme();
+  const styles = useMemo(
+    () => createStyles(colors, colorScheme),
+    [colors, colorScheme]
+  );
+
+  const { shipTypes, getShipTypes } = useShipTypes();
+  const { ports, getPorts } = usePort();
+  const { shipGroups, getShipGroups } = useShipGroups();
+  const { things, getThings } = useThings();
+
+  // State for date picker
+  const [showDatePicker, setShowDatePicker] = useState(false);
+
+  // Initialize form with react-hook-form
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    watch,
+    reset,
+  } = useForm<Model.ShipBodyRequest>({
+    defaultValues: props.initialValue || {
+      fishing_license_expiry_date: new Date(),
+    },
+  });
+
+  // Watch the date field for picker display
+  const dateValue = watch("fishing_license_expiry_date");
+
+  // Fetch data when modal opens
+  useEffect(() => {
+    if (props.isOpen) {
+      // Fetch ship types if not loaded
+      if (shipTypes === null || shipTypes.length === 0) {
+        getShipTypes();
+      }
+
+      // Fetch ports if not loaded
+      if (ports === null) {
+        getPorts();
+      }
+
+      // Fetch ship groups if not loaded
+      if (shipGroups === null) {
+        getShipGroups();
+      }
+
+      // Fetch things when modal opens
+      const payloadThings: Model.SearchThingBody = {
+        offset: 0,
+        limit: 200,
+        order: "name",
+        dir: "asc",
+      };
+      getThings(payloadThings);
+
+      // Reset form with initial values if provided
+      if (props.initialValue) {
+        reset(props.initialValue);
+      }
+    }
+  }, [props.isOpen, props.initialValue, reset]);
+
+  // Prepare options for selects
+  const shipTypeOptions = useMemo<SelectOption[]>(() => {
+    return (shipTypes || []).map((type) => ({
+      label: type.name || "",
+      value: type.id || 0,
+    }));
+  }, [shipTypes]);
+
+  const portOptions = useMemo<SelectOption[]>(() => {
+    return (ports?.ports || []).map((port) => ({
+      label: port.name || "",
+      value: port.id || 0,
+    }));
+  }, [ports]);
+
+  const shipGroupOptions = useMemo<SelectOption[]>(() => {
+    return (shipGroups || []).map((group) => ({
+      label: group.name || "",
+      value: group.id || "",
+    }));
+  }, [shipGroups]);
+
+  const thingOptions = useMemo<SelectOption[]>(() => {
+    // Filter things that are not assigned to any ship
+    const unassignedThings = (things || []).filter(
+      (thing) => !thing.metadata?.ship_id
+    );
+    return unassignedThings.map((thing) => ({
+      label: thing.name || "",
+      value: thing.id || "",
+    }));
+  }, [things]);
+
+  // Handle date picker change
+  const handleDateChange = (_: any, selectedDate?: Date) => {
+    if (selectedDate) {
+      setValue("fishing_license_expiry_date", selectedDate);
+    }
+    // On Android, close picker after selection
+    // On iOS, keep it open until user confirms with the button
+    if (Platform.OS === "android") {
+      setShowDatePicker(false);
+    }
+  };
+
+  // Format date for display
+  const formatDateForDisplay = (date: Date | string | undefined) => {
+    if (!date) return "";
+    const d = typeof date === "string" ? new Date(date) : date;
+    return d.toLocaleDateString("vi-VN", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+  };
+
+  // Handle form submission
+  const onSubmit = (data: Model.ShipBodyRequest) => {
+    // Ensure numeric fields are numbers
+    const payload: Model.ShipBodyRequest = {
+      ...data,
+      ship_type: Number(data.ship_type),
+      home_port: Number(data.home_port),
+      ship_length: Number(data.ship_length),
+      ship_power: Number(data.ship_power),
+      fishing_license_expiry_date: data.fishing_license_expiry_date,
+    };
+
+    props.onSubmit?.(payload);
+  };
+
+  return (
+    <Modal
+      animationType="slide"
+      transparent={true}
+      visible={props.isOpen}
+      onRequestClose={props.onClose}
+    >
+      <SafeAreaView style={{ flex: 1 }} edges={["top", "left", "right"]}>
+        <View style={styles.container}>
+          <Pressable style={styles.backdrop} onPress={props.onClose} />
+          <KeyboardAvoidingView
+            behavior={Platform.OS === "ios" ? "padding" : "height"}
+            style={styles.keyboardAvoidingView}
+          >
+            <View style={styles.modalContent}>
+              {/* Header */}
+              <View style={styles.header}>
+                <View style={styles.dragIndicator} />
+                <ThemedText style={styles.headerTitle}>
+                  {props.type === "create" ? "Thêm tàu mới" : "Cập nhật tàu"}
+                </ThemedText>
+                <TouchableOpacity
+                  onPress={props.onClose}
+                  style={styles.closeButton}
+                >
+                  <ThemedText style={styles.closeButtonText}>✕</ThemedText>
+                </TouchableOpacity>
+              </View>
+
+              {/* Form Content */}
+              <ScrollView
+                style={styles.scrollView}
+                contentContainerStyle={styles.scrollContent}
+                showsVerticalScrollIndicator={false}
+                keyboardShouldPersistTaps="handled"
+              >
+                {/* Registration Number - Only show in create mode */}
+                {props.type === "create" && (
+                  <View style={styles.fieldGroup}>
+                    <ThemedText style={styles.label}>Số đăng ký *</ThemedText>
+                    <Controller
+                      control={control}
+                      name="reg_number"
+                      rules={{ required: "Vui lòng nhập số đăng ký" }}
+                      render={({ field: { onChange, onBlur, value } }) => (
+                        <TextInput
+                          style={[
+                            styles.input,
+                            {
+                              borderColor: errors.reg_number
+                                ? "red"
+                                : colors.border,
+                            },
+                          ]}
+                          placeholder="Nhập số đăng ký"
+                          onBlur={onBlur}
+                          onChangeText={(text) => onChange(text.trim())}
+                          value={value}
+                          placeholderTextColor={colors.textSecondary}
+                        />
+                      )}
+                    />
+                    {errors.reg_number && (
+                      <ThemedText style={styles.errorText}>
+                        {errors.reg_number.message}
+                      </ThemedText>
+                    )}
+                  </View>
+                )}
+
+                {/* Ship Name */}
+                <View style={styles.fieldGroup}>
+                  <ThemedText style={styles.label}>Tên tàu *</ThemedText>
+                  <Controller
+                    control={control}
+                    name="name"
+                    rules={{ required: "Vui lòng nhập tên tàu" }}
+                    render={({ field: { onChange, onBlur, value } }) => (
+                      <TextInput
+                        style={[
+                          styles.input,
+                          { borderColor: errors.name ? "red" : colors.border },
+                        ]}
+                        placeholder="Nhập tên tàu"
+                        onBlur={onBlur}
+                        onChangeText={onChange}
+                        value={value}
+                        placeholderTextColor={colors.textSecondary}
+                      />
+                    )}
+                  />
+                  {errors.name && (
+                    <ThemedText style={styles.errorText}>
+                      {errors.name.message}
+                    </ThemedText>
+                  )}
+                </View>
+
+                {/* Ship Type */}
+                <View style={styles.fieldGroup}>
+                  <ThemedText style={styles.label}>Loại tàu *</ThemedText>
+                  <Controller
+                    control={control}
+                    name="ship_type"
+                    rules={{ required: "Vui lòng chọn loại tàu" }}
+                    render={({ field: { onChange, value } }) => (
+                      <Select
+                        value={value}
+                        onChange={onChange}
+                        options={shipTypeOptions}
+                        placeholder="Chọn loại tàu"
+                        style={[
+                          styles.selectInput,
+                          {
+                            borderColor: errors.ship_type
+                              ? "red"
+                              : colors.border,
+                          },
+                        ]}
+                      />
+                    )}
+                  />
+                  {errors.ship_type && (
+                    <ThemedText style={styles.errorText}>
+                      {errors.ship_type.message}
+                    </ThemedText>
+                  )}
+                </View>
+
+                {/* Home Port */}
+                <View style={styles.fieldGroup}>
+                  <ThemedText style={styles.label}>
+                    Cảng đăng ký đỗ *
+                  </ThemedText>
+                  <Controller
+                    control={control}
+                    name="home_port"
+                    rules={{ required: "Vui lòng chọn cảng đăng ký" }}
+                    render={({ field: { onChange, value } }) => (
+                      <Select
+                        value={value}
+                        onChange={onChange}
+                        options={portOptions}
+                        placeholder="Chọn cảng đăng ký"
+                        style={[
+                          styles.selectInput,
+                          {
+                            borderColor: errors.home_port
+                              ? "red"
+                              : colors.border,
+                          },
+                        ]}
+                      />
+                    )}
+                  />
+                  {errors.home_port && (
+                    <ThemedText style={styles.errorText}>
+                      {errors.home_port.message}
+                    </ThemedText>
+                  )}
+                </View>
+
+                {/* Fishing License Number */}
+                <View style={styles.fieldGroup}>
+                  <ThemedText style={styles.label}>Số giấy phép *</ThemedText>
+                  <Controller
+                    control={control}
+                    name="fishing_license_number"
+                    rules={{ required: "Vui lòng nhập số giấy phép" }}
+                    render={({ field: { onChange, onBlur, value } }) => (
+                      <TextInput
+                        style={[
+                          styles.input,
+                          {
+                            borderColor: errors.fishing_license_number
+                              ? "red"
+                              : colors.border,
+                          },
+                        ]}
+                        placeholder="Nhập số giấy phép"
+                        onBlur={onBlur}
+                        onChangeText={onChange}
+                        value={value}
+                        placeholderTextColor={colors.textSecondary}
+                      />
+                    )}
+                  />
+                  {errors.fishing_license_number && (
+                    <ThemedText style={styles.errorText}>
+                      {errors.fishing_license_number.message}
+                    </ThemedText>
+                  )}
+                </View>
+
+                {/* Fishing License Expiry Date */}
+                <View style={styles.fieldGroup}>
+                  <ThemedText style={styles.label}>Ngày hết hạn *</ThemedText>
+                  <Controller
+                    control={control}
+                    name="fishing_license_expiry_date"
+                    rules={{
+                      required: "Vui lòng chọn ngày hết hạn",
+                      validate: (date) => {
+                        if (!date) return "Vui lòng chọn ngày hết hạn";
+                        const selectedDate = new Date(date);
+                        const today = new Date();
+                        today.setHours(0, 0, 0, 0);
+                        if (selectedDate < today) {
+                          return "Ngày hết hạn không thể là ngày trong quá khứ";
+                        }
+                        return true;
+                      },
+                    }}
+                    render={({ field: { onChange, value } }) => (
+                      <TouchableOpacity
+                        onPress={() => setShowDatePicker(true)}
+                        style={[
+                          styles.input,
+                          styles.dateInput,
+                          {
+                            borderColor: errors.fishing_license_expiry_date
+                              ? "red"
+                              : colors.border,
+                          },
+                        ]}
+                      >
+                        <ThemedText
+                          style={{
+                            color: value ? colors.text : colors.textSecondary,
+                          }}
+                        >
+                          {formatDateForDisplay(value) || "Chọn ngày hết hạn"}
+                        </ThemedText>
+                      </TouchableOpacity>
+                    )}
+                  />
+                  {errors.fishing_license_expiry_date && (
+                    <ThemedText style={styles.errorText}>
+                      {errors.fishing_license_expiry_date.message}
+                    </ThemedText>
+                  )}
+                </View>
+
+                {/* Ship Length */}
+                <View style={styles.fieldGroup}>
+                  <ThemedText style={styles.label}>Chiều dài (m) *</ThemedText>
+                  <Controller
+                    control={control}
+                    name="ship_length"
+                    rules={{
+                      required: "Vui lòng nhập chiều dài",
+                      pattern: {
+                        value: /^\d*\.?\d+$/,
+                        message: "Vui lòng nhập số hợp lệ",
+                      },
+                      validate: (value) => {
+                        const num = Number(value);
+                        if (isNaN(num) || num <= 0) {
+                          return "Chiều dài phải lớn hơn 0";
+                        }
+                        return true;
+                      },
+                    }}
+                    render={({ field: { onChange, onBlur, value } }) => (
+                      <TextInput
+                        style={[
+                          styles.input,
+                          {
+                            borderColor: errors.ship_length
+                              ? "red"
+                              : colors.border,
+                          },
+                        ]}
+                        placeholder="Nhập chiều dài tàu"
+                        onBlur={onBlur}
+                        onChangeText={onChange}
+                        value={value?.toString()}
+                        keyboardType="numeric"
+                        placeholderTextColor={colors.textSecondary}
+                      />
+                    )}
+                  />
+                  {errors.ship_length && (
+                    <ThemedText style={styles.errorText}>
+                      {errors.ship_length.message}
+                    </ThemedText>
+                  )}
+                </View>
+
+                {/* Ship Power */}
+                <View style={styles.fieldGroup}>
+                  <ThemedText style={styles.label}>
+                    Công suất (mã lực) *
+                  </ThemedText>
+                  <Controller
+                    control={control}
+                    name="ship_power"
+                    rules={{
+                      required: "Vui lòng nhập công suất",
+                      pattern: {
+                        value: /^\d*\.?\d+$/,
+                        message: "Vui lòng nhập số hợp lệ",
+                      },
+                      validate: (value) => {
+                        const num = Number(value);
+                        if (isNaN(num) || num <= 0) {
+                          return "Công suất phải lớn hơn 0";
+                        }
+                        return true;
+                      },
+                    }}
+                    render={({ field: { onChange, onBlur, value } }) => (
+                      <TextInput
+                        style={[
+                          styles.input,
+                          {
+                            borderColor: errors.ship_power
+                              ? "red"
+                              : colors.border,
+                          },
+                        ]}
+                        placeholder="Nhập công suất tàu"
+                        onBlur={onBlur}
+                        onChangeText={onChange}
+                        value={value?.toString()}
+                        keyboardType="numeric"
+                        placeholderTextColor={colors.textSecondary}
+                      />
+                    )}
+                  />
+                  {errors.ship_power && (
+                    <ThemedText style={styles.errorText}>
+                      {errors.ship_power.message}
+                    </ThemedText>
+                  )}
+                </View>
+
+                {/* Ship Group - Only show in update mode */}
+                {props.type === "update" && (
+                  <View style={styles.fieldGroup}>
+                    <ThemedText style={styles.label}>Đội tàu</ThemedText>
+                    <Controller
+                      control={control}
+                      name="ship_group_id"
+                      render={({ field: { onChange, value } }) => (
+                        <Select
+                          value={value}
+                          onChange={onChange}
+                          options={shipGroupOptions}
+                          placeholder="Chọn đội tàu"
+                          style={styles.selectInput}
+                        />
+                      )}
+                    />
+                  </View>
+                )}
+
+                {/* Device/Thing - Only show in create mode */}
+                {props.type === "create" && (
+                  <View style={styles.fieldGroup}>
+                    <ThemedText style={styles.label}>
+                      Thiết bị kết nối *
+                    </ThemedText>
+                    <Controller
+                      control={control}
+                      name="thing_id"
+                      rules={{ required: "Vui lòng chọn thiết bị kết nối" }}
+                      render={({ field: { onChange, value } }) => (
+                        <Select
+                          value={value}
+                          onChange={onChange}
+                          options={thingOptions}
+                          placeholder="Chọn thiết bị kết nối"
+                          style={[
+                            styles.selectInput,
+                            {
+                              borderColor: errors.thing_id
+                                ? "red"
+                                : colors.border,
+                            },
+                          ]}
+                        />
+                      )}
+                    />
+                    {errors.thing_id && (
+                      <ThemedText style={styles.errorText}>
+                        {errors.thing_id.message}
+                      </ThemedText>
+                    )}
+                  </View>
+                )}
+              </ScrollView>
+
+              {/* Action Buttons */}
+              <View style={styles.actionButtons}>
+                <TouchableOpacity
+                  style={[styles.resetButton, { borderColor: colors.border }]}
+                  onPress={() => {
+                    reset(props.initialValue || {});
+                  }}
+                >
+                  <ThemedText
+                    style={[styles.resetButtonText, { color: colors.text }]}
+                  >
+                    Nhập lại
+                  </ThemedText>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={[
+                    styles.submitButton,
+                    { backgroundColor: colors.primary },
+                  ]}
+                  onPress={handleSubmit(onSubmit)}
+                >
+                  <ThemedText style={styles.submitButtonText}>
+                    {props.type === "create" ? "Thêm tàu" : "Cập nhật"}
+                  </ThemedText>
+                </TouchableOpacity>
+              </View>
+            </View>
+          </KeyboardAvoidingView>
+        </View>
+      </SafeAreaView>
+
+      {/* Date Picker Modal - Only show on Android as modal, iOS shows inline */}
+      {Platform.OS === "android" && showDatePicker && (
+        <DateTimePicker
+          value={
+            typeof dateValue === "string"
+              ? new Date(dateValue)
+              : dateValue || new Date()
+          }
+          mode="date"
+          display="default"
+          onChange={handleDateChange}
+          minimumDate={new Date()}
+        />
+      )}
+      {Platform.OS === "ios" && showDatePicker && (
+        <Modal
+          transparent={true}
+          animationType="fade"
+          visible={showDatePicker}
+          onRequestClose={() => setShowDatePicker(false)}
+        >
+          <SafeAreaView style={styles.datePickerModal}>
+            <View style={styles.datePickerContent}>
+              <View style={styles.datePickerHeader}>
+                <ThemedText style={styles.datePickerTitle}>
+                  Chọn ngày hết hạn
+                </ThemedText>
+                <TouchableOpacity onPress={() => setShowDatePicker(false)}>
+                  <ThemedText style={styles.datePickerClose}>✕</ThemedText>
+                </TouchableOpacity>
+              </View>
+              <DateTimePicker
+                value={
+                  typeof dateValue === "string"
+                    ? new Date(dateValue)
+                    : dateValue || new Date()
+                }
+                mode="date"
+                display="spinner"
+                onChange={handleDateChange}
+                themeVariant={colorScheme}
+                textColor={colors.text}
+                minimumDate={new Date()}
+                style={styles.datePickerIOS}
+              />
+              <TouchableOpacity
+                style={[
+                  styles.datePickerButton,
+                  { backgroundColor: colors.primary },
+                ]}
+                onPress={() => setShowDatePicker(false)}
+              >
+                <ThemedText style={styles.datePickerButtonText}>
+                  Xác nhận
+                </ThemedText>
+              </TouchableOpacity>
+            </View>
+          </SafeAreaView>
+        </Modal>
+      )}
+    </Modal>
+  );
+};
+
+const createStyles = (colors: typeof Colors.light, scheme: ColorScheme) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      position: "relative",
+    },
+    keyboardAvoidingView: {
+      flex: 1,
+      justifyContent: "flex-end",
+    },
+    backdrop: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: "rgba(0, 0, 0, 0.3)",
+    },
+    modalContent: {
+      height: "90%",
+      backgroundColor: colors.background,
+      borderTopLeftRadius: 24,
+      borderTopRightRadius: 24,
+      shadowColor: "#000",
+      shadowOffset: {
+        width: 0,
+        height: -4,
+      },
+      shadowOpacity: 0.25,
+      shadowRadius: 8,
+      elevation: 10,
+    },
+    header: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      paddingVertical: 16,
+      paddingHorizontal: 20,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.border,
+      position: "relative",
+    },
+    dragIndicator: {
+      position: "absolute",
+      top: 8,
+      width: 40,
+      height: 4,
+      backgroundColor: colors.border,
+      borderRadius: 2,
+    },
+    headerTitle: {
+      fontSize: 18,
+      fontWeight: "700",
+      textAlign: "center",
+      color: colors.text,
+    },
+    closeButton: {
+      position: "absolute",
+      right: 16,
+      top: 16,
+      width: 32,
+      height: 32,
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: 16,
+    },
+    closeButtonText: {
+      fontSize: 20,
+      fontWeight: "300",
+      color: colors.text,
+    },
+    scrollView: {
+      flex: 1,
+      padding: 20,
+    },
+    scrollContent: {
+      paddingBottom: Platform.OS === "ios" ? 120 : 80,
+    },
+    fieldGroup: {
+      marginBottom: 24,
+    },
+    label: {
+      fontSize: 15,
+      fontWeight: "600",
+      marginBottom: 8,
+      color: colors.text,
+    },
+    input: {
+      borderWidth: 1,
+      borderRadius: 12,
+      paddingHorizontal: 16,
+      paddingVertical: 14,
+      fontSize: 15,
+      backgroundColor: colors.surface,
+      color: colors.text,
+    },
+    selectInput: {
+      borderWidth: 1,
+      borderRadius: 12,
+      backgroundColor: colors.surface,
+    },
+    dateInput: {
+      justifyContent: "center",
+    },
+    errorText: {
+      fontSize: 13,
+      color: "red",
+      marginTop: 4,
+    },
+    actionButtons: {
+      flexDirection: "row",
+      paddingHorizontal: 20,
+      paddingVertical: 16,
+      gap: 12,
+      borderTopWidth: 1,
+      borderTopColor: colors.border,
+    },
+    resetButton: {
+      flex: 1,
+      paddingVertical: 14,
+      borderRadius: 12,
+      borderWidth: 1,
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    resetButtonText: {
+      fontSize: 16,
+      fontWeight: "600",
+    },
+    submitButton: {
+      flex: 1,
+      paddingVertical: 14,
+      borderRadius: 12,
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    submitButtonText: {
+      color: "#ffffff",
+      fontSize: 16,
+      fontWeight: "600",
+    },
+    // Date Picker Modal Styles
+    datePickerModal: {
+      flex: 1,
+      justifyContent: "flex-end",
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+    },
+    datePickerContent: {
+      backgroundColor: colors.background,
+      borderTopLeftRadius: 24,
+      borderTopRightRadius: 24,
+      paddingBottom: 20,
+    },
+    datePickerHeader: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      paddingHorizontal: 20,
+      paddingVertical: 16,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.border,
+    },
+    datePickerTitle: {
+      fontSize: 16,
+      fontWeight: "600",
+      color: colors.text,
+    },
+    datePickerClose: {
+      fontSize: 20,
+      color: colors.text,
+    },
+    datePickerIOS: {
+      height: 200,
+      marginTop: 20,
+    },
+    datePickerButton: {
+      marginHorizontal: 20,
+      paddingVertical: 14,
+      borderRadius: 12,
+      alignItems: "center",
+      marginTop: 20,
+    },
+    datePickerButtonText: {
+      color: "#ffffff",
+      fontSize: 16,
+      fontWeight: "600",
+    },
+  });
+
+export default CreateOrUpdateShip;

components/manager/ship_components/ShipCard.tsx

@@ -0,0 +1,523 @@
+import { queryShipsImage } from "@/controller/DeviceController";
+import { useThemeContext } from "@/hooks/use-theme-context";
+import { useGroup } from "@/state/use-group";
+import { usePort } from "@/state/use-ports";
+import { useShipTypes } from "@/state/use-ship-types";
+import { Ionicons } from "@expo/vector-icons";
+import { fromByteArray } from "base64-js";
+import { Image } from "expo-image";
+import { useEffect, useState } from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+interface ShipCardProps {
+  ship: Model.Ship;
+  onPress?: () => void;
+}
+
+export default function ShipCard({ ship, onPress }: ShipCardProps) {
+  const { colors } = useThemeContext();
+  const { ports, getPorts } = usePort();
+  const { shipTypes, getShipTypes } = useShipTypes();
+  const [shipImage, setShipImage] = useState<string | null>(null);
+  const { groups, getUserGroups, getChildrenOfGroups, childrenOfGroups } =
+    useGroup();
+  useEffect(() => {
+    if (ports === null) {
+      getPorts();
+    }
+  }, [ports, getPorts]);
+  useEffect(() => {
+    if (!shipTypes || shipTypes.length === 0) {
+      getShipTypes();
+    }
+  }, [shipTypes, getShipTypes]);
+  useEffect(() => {
+    if (groups === null) {
+      getUserGroups();
+    }
+  }, [groups, getUserGroups]);
+  useEffect(() => {
+    if (groups && ship.ship_group_id) {
+      const groupId = groups?.groups?.[0]?.id || "";
+      // childrenOfGroups is initialised as null in the store; check for null to fetch once
+      if (groupId && childrenOfGroups == null) {
+        getChildrenOfGroups(groupId);
+      }
+    }
+  }, [groups, childrenOfGroups, getChildrenOfGroups]);
+  // Themed styles
+  useEffect(() => {
+    let mounted = true;
+    const loadShipImage = async () => {
+      try {
+        const resp = await queryShipsImage(ship.id || "");
+        const contentType = resp.headers["content-type"] || "image/jpeg";
+        const uint8 = new Uint8Array(resp.data); // ArrayBuffer -> Uint8Array
+        const base64 = fromByteArray(uint8); // base64-js
+        const uri = `data:${contentType};base64,${base64}`;
+
+        if (!mounted) return;
+        // assign received value to state if present; adapt to actual resp shape as needed
+        setShipImage(uri);
+      } catch (error) {
+        // console.log("Error when get image: ", error);
+      }
+    };
+    loadShipImage();
+    return () => {
+      mounted = false;
+    };
+  }, [ship]);
+  const themedStyles = {
+    card: {
+      backgroundColor: colors.card,
+      shadowColor: colors.text,
+    },
+    title: {
+      color: colors.text,
+    },
+    subtitle: {
+      color: colors.textSecondary,
+    },
+    label: {
+      color: colors.textSecondary,
+    },
+    value: {
+      color: colors.text,
+    },
+    divider: {
+      backgroundColor: colors.separator,
+    },
+    badge: {
+      backgroundColor: colors.primary + "15",
+      borderColor: colors.primary,
+    },
+    badgeText: {
+      color: colors.primary,
+    },
+    infoBox: {
+      backgroundColor: colors.primary + "10",
+    },
+    infoIcon: {
+      color: colors.primary,
+    },
+  };
+
+  // ============ IMAGE VARIANT ============
+  if (shipImage) {
+    return (
+      <TouchableOpacity
+        style={[styles.imageCard, themedStyles.card]}
+        onPress={onPress}
+        activeOpacity={0.8}
+      >
+        {/* Image Section */}
+        <View style={styles.imageContainer}>
+          {shipImage ? (
+            <Image
+              source={{ uri: shipImage }}
+              style={styles.shipImage}
+              resizeMode="cover"
+            />
+          ) : (
+            <View
+              style={[
+                styles.imagePlaceholder,
+                { backgroundColor: colors.backgroundSecondary },
+              ]}
+            >
+              <Ionicons name="boat" size={48} color={colors.textSecondary} />
+            </View>
+          )}
+          {/* Ship Type Badge */}
+          {shipTypes && (
+            <View style={styles.typeBadge}>
+              <Ionicons name="boat-outline" size={14} color="#fff" />
+              <Text style={styles.typeBadgeText}>
+                {shipTypes.find((type) => type.id === ship.ship_type)?.name ||
+                  "Unknown"}
+              </Text>
+            </View>
+          )}
+        </View>
+
+        {/* Info Section */}
+        <View style={styles.imageCardContent}>
+          {/* Title & Registration */}
+          <Text style={[styles.imageCardTitle, themedStyles.title]}>
+            {ship.name || "Unknown Ship"}
+          </Text>
+          <View style={styles.regRow}>
+            <View style={[styles.regBadge, themedStyles.badge]}>
+              <Text style={[styles.regBadgeText, themedStyles.badgeText]}>
+                {ship.reg_number || "-"}
+              </Text>
+            </View>
+            {childrenOfGroups && (
+              <View style={styles.locationRow}>
+                <Ionicons
+                  name="location"
+                  size={14}
+                  color={colors.textSecondary}
+                />
+                <Text style={[styles.locationText, themedStyles.subtitle]}>
+                  {childrenOfGroups.groups?.find(
+                    (group) => group?.metadata?.code === ship.province_code
+                  )?.name || "-"}
+                </Text>
+              </View>
+            )}
+          </View>
+
+          {/* Info Grid */}
+          <View style={styles.imageInfoGrid}>
+            <InfoBox
+              icon="resize"
+              label="Length"
+              value={ship.ship_length ? `${ship.ship_length}m` : "-"}
+              themedStyles={themedStyles}
+            />
+            <InfoBox
+              icon="flash"
+              label="Engine Power"
+              value={ship.ship_power ? `${ship.ship_power} HP` : "-"}
+              themedStyles={themedStyles}
+            />
+            <InfoBox
+              icon="document-text"
+              label="License"
+              value={ship.fishing_license_number || "-"}
+              themedStyles={themedStyles}
+            />
+            <InfoBox
+              icon="navigate"
+              label="Home Port"
+              value={
+                ports?.ports
+                  ? ports.ports.find((port) => port.id === ship.home_port)
+                      ?.name || "-"
+                  : "-"
+              }
+              themedStyles={themedStyles}
+            />
+          </View>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+
+  // ============ COMPACT VARIANT ============
+  return (
+    <TouchableOpacity
+      style={[styles.compactCard, themedStyles.card]}
+      onPress={onPress}
+      activeOpacity={0.8}
+    >
+      {/* Header */}
+      <View style={styles.compactHeader}>
+        <View style={[styles.shipIcon, themedStyles.infoBox]}>
+          <Ionicons name="boat" size={24} color={colors.primary} />
+        </View>
+        <View style={styles.compactHeaderText}>
+          <Text style={[styles.compactTitle, themedStyles.title]}>
+            {ship.name || "Unknown Ship"}
+          </Text>
+          <Text style={[styles.compactSubtitle, themedStyles.subtitle]}>
+            {shipTypes.find((type) => type.id === ship.ship_type)?.name ||
+              "Unknown"}
+          </Text>
+        </View>
+        <View style={[styles.regBadge, themedStyles.badge]}>
+          <Text style={[styles.regBadgeText, themedStyles.badgeText]}>
+            {ship.reg_number || "-"}
+          </Text>
+        </View>
+      </View>
+
+      {/* Info Grid */}
+      <View style={styles.compactInfoGrid}>
+        <CompactInfoBox
+          icon="resize"
+          label="Length"
+          value={ship.ship_length ? `${ship.ship_length}m` : "-"}
+          themedStyles={themedStyles}
+        />
+        <CompactInfoBox
+          icon="flash"
+          label="Power"
+          value={ship.ship_power ? `${ship.ship_power} HP` : "-"}
+          themedStyles={themedStyles}
+        />
+        <CompactInfoBox
+          icon="navigate"
+          label="Port"
+          value={
+            ports?.ports
+              ? ports.ports.find((port) => port.id === ship.home_port)?.name ||
+                "-"
+              : "-"
+          }
+          themedStyles={themedStyles}
+        />
+        <CompactInfoBox
+          icon="document-text"
+          label="License"
+          value={ship.fishing_license_number || "-"}
+          themedStyles={themedStyles}
+        />
+        <CompactInfoBox
+          icon="location"
+          label="Province"
+          value={
+            childrenOfGroups?.groups?.find(
+              (group) => group?.metadata?.code === ship.province_code
+            )?.name || "-"
+          }
+          themedStyles={themedStyles}
+        />
+      </View>
+
+      {/* Footer - IMO & MMSI */}
+      {(ship.imo_number || ship.mmsi_number) && (
+        <>
+          <View style={[styles.divider, themedStyles.divider]} />
+          <View style={styles.footerInfo}>
+            {ship.imo_number && (
+              <View style={styles.footerRow}>
+                <Text style={[styles.footerLabel, themedStyles.label]}>
+                  IMO Number:
+                </Text>
+                <Text style={[styles.footerValue, themedStyles.value]}>
+                  {ship.imo_number}
+                </Text>
+              </View>
+            )}
+            {ship.mmsi_number && (
+              <View style={styles.footerRow}>
+                <Text style={[styles.footerLabel, themedStyles.label]}>
+                  MMSI Number:
+                </Text>
+                <Text style={[styles.footerValue, themedStyles.value]}>
+                  {ship.mmsi_number}
+                </Text>
+              </View>
+            )}
+          </View>
+        </>
+      )}
+    </TouchableOpacity>
+  );
+}
+
+// ============ SUB-COMPONENTS ============
+
+interface InfoBoxProps {
+  icon: keyof typeof Ionicons.glyphMap;
+  label: string;
+  value: string;
+  themedStyles: any;
+}
+
+function InfoBox({ icon, label, value, themedStyles }: InfoBoxProps) {
+  return (
+    <View style={styles.infoBox}>
+      <Ionicons name={icon} size={18} color={themedStyles.infoIcon.color} />
+      <Text style={[styles.infoLabel, themedStyles.label]}>{label}</Text>
+      <Text style={[styles.infoValue, themedStyles.value]}>{value}</Text>
+    </View>
+  );
+}
+
+function CompactInfoBox({ icon, label, value, themedStyles }: InfoBoxProps) {
+  return (
+    <View style={[styles.compactInfoBox, themedStyles.infoBox]}>
+      <Ionicons name={icon} size={16} color={themedStyles.infoIcon.color} />
+      <View style={styles.compactInfoText}>
+        <Text style={[styles.compactInfoLabel, themedStyles.label]}>
+          {label}
+        </Text>
+        <Text style={[styles.compactInfoValue, themedStyles.value]}>
+          {value}
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+// ============ STYLES ============
+
+const styles = StyleSheet.create({
+  // === IMAGE VARIANT ===
+  imageCard: {
+    borderRadius: 16,
+    overflow: "hidden",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 3,
+    marginVertical: 8,
+    marginHorizontal: 16,
+    boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+  },
+  imageContainer: {
+    height: 180,
+    position: "relative",
+  },
+  shipImage: {
+    width: "100%",
+    height: "100%",
+  },
+  imagePlaceholder: {
+    width: "100%",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  typeBadge: {
+    position: "absolute",
+    top: 12,
+    left: 12,
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "rgba(59, 130, 246, 0.9)",
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 8,
+    gap: 6,
+  },
+  typeBadgeText: {
+    color: "#fff",
+    fontSize: 12,
+    fontWeight: "600",
+  },
+  imageCardContent: {
+    padding: 16,
+  },
+  imageCardTitle: {
+    fontSize: 18,
+    fontWeight: "700",
+    marginBottom: 8,
+  },
+  regRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    marginBottom: 16,
+  },
+  regBadge: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 6,
+    borderWidth: 1,
+  },
+  regBadgeText: {
+    fontSize: 12,
+    fontWeight: "600",
+  },
+  locationRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+  },
+  locationText: {
+    fontSize: 13,
+  },
+  imageInfoGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 12,
+  },
+  infoBox: {
+    width: "47%",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingVertical: 8,
+  },
+  infoLabel: {
+    fontSize: 12,
+  },
+  infoValue: {
+    fontSize: 14,
+    fontWeight: "600",
+    marginLeft: "auto",
+  },
+
+  // === COMPACT VARIANT ===
+  compactCard: {
+    borderRadius: 16,
+    padding: 16,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.08,
+    shadowRadius: 8,
+    elevation: 2,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  compactHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 16,
+  },
+  shipIcon: {
+    width: 48,
+    height: 48,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  compactHeaderText: {
+    flex: 1,
+    marginLeft: 12,
+  },
+  compactTitle: {
+    fontSize: 16,
+    fontWeight: "700",
+  },
+  compactSubtitle: {
+    fontSize: 13,
+    marginTop: 2,
+  },
+  compactInfoGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 10,
+  },
+  compactInfoBox: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderRadius: 10,
+    gap: 8,
+    minWidth: "47%",
+    flexGrow: 1,
+  },
+  compactInfoText: {
+    flex: 1,
+  },
+  compactInfoLabel: {
+    fontSize: 11,
+  },
+  compactInfoValue: {
+    fontSize: 14,
+    fontWeight: "600",
+  },
+  divider: {
+    height: 1,
+    marginVertical: 12,
+  },
+  footerInfo: {
+    gap: 6,
+  },
+  footerRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  footerLabel: {
+    fontSize: 13,
+  },
+  footerValue: {
+    fontSize: 13,
+    fontWeight: "500",
+  },
+});

components/manager/ships.tsx

@@ -0,0 +1,140 @@
+import { ThemedText } from "@/components/themed-text";
+import { ThemedView } from "@/components/themed-view";
+import { queryUpdateShip } from "@/controller/DeviceController";
+import { useTheme } from "@/hooks/use-theme-context";
+import { showSuccessToast } from "@/services/toast_service";
+import { useShip } from "@/state/use-ship";
+import { useEffect, useState } from "react";
+import { ScrollView, StyleSheet, TouchableOpacity, View } from "react-native";
+import CreateOrUpdateShip from "./ship_components/CreateOrUpdateShip";
+import ShipCard from "./ship_components/ShipCard";
+
+interface ShipUpdateData {
+  ship_id: string;
+  body: Model.ShipBodyRequest;
+}
+
+export default function ShipsScreen() {
+  const { ships, getShip } = useShip();
+  const { colors } = useTheme();
+  const [ship, setShip] = useState<ShipUpdateData | null>(null);
+  const [showUpdateShip, setShowUpdateShip] = useState<boolean>(false);
+  const [isCreateShip, setIsCreateShip] = useState<boolean>(false);
+  useEffect(() => {
+    if (ships === null) {
+      getShip();
+    }
+  }, [ships]);
+  const handleClickShip = async (ship: Model.Ship) => {
+    const shipBodyRequest: Model.ShipBodyRequest = {
+      name: ship.name,
+      reg_number: ship.reg_number,
+      imo_number: ship.imo_number,
+      mmsi_number: ship.mmsi_number,
+      thing_id: ship.thing_id,
+      ship_type: ship.ship_type,
+      owner_id: ship.owner_id,
+      home_port: ship.home_port,
+      ship_length: ship.ship_length,
+      ship_power: ship.ship_power,
+      ship_group_id: ship.ship_group_id,
+      fishing_license_number: ship.fishing_license_number,
+      fishing_license_expiry_date: ship.fishing_license_expiry_date,
+    };
+    setShip({ ship_id: ship.id!, body: shipBodyRequest });
+    setIsCreateShip(false); // Đảm bảo là mode update khi edit
+    setShowUpdateShip(true);
+  };
+  const handleUpdateShip = async (body: Model.ShipBodyRequest) => {
+    try {
+      let resp;
+      if (isCreateShip) {
+        // TODO: Thêm API create ship khi có
+        showSuccessToast("Thêm tàu mới thành công");
+      } else {
+        resp = await queryUpdateShip(ship!.ship_id, body);
+        if (resp.status === 200) {
+          showSuccessToast("Cập nhật thông tin tàu thành công");
+        }
+      }
+      setShowUpdateShip(false);
+      await getShip();
+    } catch (error) {
+      console.error("Error when update/create Ship: ", error);
+    }
+  };
+
+  const handleCreateNewShip = () => {
+    setShip(null);
+    setIsCreateShip(true);
+    setShowUpdateShip(true);
+  };
+  return (
+    <>
+      <ScrollView>
+        <ThemedView style={styles.container}>
+          {ships?.map((ship) => (
+            <ShipCard
+              key={ship.id}
+              ship={ship}
+              onPress={() => handleClickShip(ship)}
+            />
+          ))}
+
+          {/* Thêm khoảng trống ở cuối để không bị FAB che */}
+          <View style={styles.bottomPadding} />
+        </ThemedView>
+      </ScrollView>
+
+      {/* Floating Action Button */}
+      <TouchableOpacity
+        style={[styles.fab, { backgroundColor: colors.primary }]}
+        onPress={handleCreateNewShip}
+      >
+        <ThemedText style={styles.fabText}>+</ThemedText>
+      </TouchableOpacity>
+
+      <CreateOrUpdateShip
+        isOpen={showUpdateShip}
+        initialValue={ship?.body || undefined}
+        type={isCreateShip ? "create" : "update"}
+        onClose={() => setShowUpdateShip(false)}
+        onSubmit={handleUpdateShip}
+      />
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingBottom: 20, // Khoảng trống cho FAB
+  },
+  bottomPadding: {
+    height: 50, // Thêm khoảng trống ở cuối
+  },
+  fab: {
+    position: "absolute",
+    bottom: 30,
+    right: 20,
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    justifyContent: "center",
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  fabText: {
+    fontSize: 24,
+    fontWeight: "bold",
+    color: "#ffffff",
+    lineHeight: 24,
+  },
+});

config/axios.ts

@@ -72,7 +72,11 @@ api.interceptors.response.use(
       statusText ||
       "Unknown error";
 
-    showErrorToast(`Lỗi ${status}: ${errMsg}`);
+    // Không hiển thị toast cho status 400 (validation errors)
+    if (status !== 400) {
+      showErrorToast(`Lỗi ${status}: ${errMsg}`);
+    }
+
     if (status === 401) {
       handle401();
     }

constants/index.ts

@@ -1,5 +1,7 @@
 export const TOKEN = "token";
 export const DOMAIN = "domain";
+export const UID = "user-id";
+export const ROLE = "role";
 export const MAP_TRACKPOINTS_ID = "ship-trackpoints";
 export const MAP_POLYLINE_BAN = "ban-polyline";
 export const MAP_POLYGON_BAN = "ban-polygon";
@@ -36,6 +38,7 @@ export const STATUS_SOS = 3;
 
 // API Path Constants
 export const API_PATH_LOGIN = "/api/tokens";
+export const API_PATH_GET_PROFILE = "/api/users/profile";
 export const API_PATH_SEARCH_THINGS = "/api/things/search";
 export const API_PATH_ENTITIES = "/api/io/entities";
 export const API_PATH_SHIP_INFO = "/api/sgw/shipinfo";
@@ -57,3 +60,6 @@ export const API_GET_SHIP_GROUPS = "/api/sgw/shipsgroup";
 export const API_GET_LAST_TRIP = "/api/sgw/trips/last";
 export const API_GET_ALARM = "/api/alarms";
 export const API_MANAGER_ALARM = "/api/alarms/confirm";
+export const API_GET_ALL_SHIP = "/api/sgw/ships";
+export const API_GET_ALL_PORT = "/api/sgw/ports";
+export const API_GET_PHOTO = "/api/sgw/photo";

controller/AuthController.ts

@@ -1,6 +1,10 @@
 import { api } from "@/config";
-import { API_PATH_LOGIN } from "@/constants";
+import { API_PATH_GET_PROFILE, API_PATH_LOGIN } from "@/constants";
 
 export async function queryLogin(body: Model.LoginRequestBody) {
   return api.post<Model.LoginResponse>(API_PATH_LOGIN, body);
 }
+
+export async function queryProfile() {
+  return api.get<Model.ProfileResponse>(API_PATH_GET_PROFILE);
+}

controller/DeviceController.ts

@@ -1,5 +1,7 @@
 import { api } from "@/config";
 import {
+  API_GET_ALL_SHIP,
+  API_GET_PHOTO,
   API_GET_SHIP_GROUPS,
   API_GET_SHIP_TYPES,
   API_PATH_SEARCH_THINGS,
@@ -16,3 +18,22 @@ export async function queryShipTypes() {
 export async function queryShipGroups() {
   return await api.get<Model.ShipGroup[]>(API_GET_SHIP_GROUPS);
 }
+
+export async function queryAllShips(params: Model.SearchThingBody) {
+  return await api.get<Model.ShipResponse>(API_GET_ALL_SHIP, {
+    params: params,
+  });
+}
+
+export async function queryShipsImage(ship_id: string) {
+  return await api.get(`${API_GET_PHOTO}/ship/${ship_id}/main`, {
+    responseType: "arraybuffer",
+  });
+}
+
+export async function queryUpdateShip(
+  shipId: string,
+  body: Model.ShipBodyRequest
+) {
+  return await api.put(`${API_GET_ALL_SHIP}/${shipId}`, body);
+}

controller/GroupController.ts

@@ -0,0 +1,25 @@
+import { api } from "@/config";
+import { UID } from "@/constants";
+import { getStorageItem } from "@/utils/storage";
+
+export async function queryUserGroup() {
+  const user_id = await getStorageItem(UID);
+  return api.get<Model.GroupResponse>(`/api/members/${user_id}/groups`);
+}
+
+export async function queryChilrentOfGroups(
+  group_id: string,
+  level: number = 5,
+  isTree: boolean = false
+) {
+  // ensure proper query param values when not provided by caller
+  const lvl = typeof level === "number" ? level : 5;
+  const tree = !!isTree;
+  const params = {
+    level: lvl,
+    tree: tree,
+  };
+  return api.get<Model.GroupResponse>(`/api/groups/${group_id}/children`, {
+    params,
+  });
+}

controller/PortController.ts

@@ -0,0 +1,6 @@
+import { api } from "@/config";
+import { API_GET_ALL_PORT } from "@/constants";
+
+export async function queryPorts(body?: Model.SearchThingBody) {
+  return api.post<Model.PortResponse>(API_GET_ALL_PORT, body);
+}

controller/index.ts

@@ -1,5 +1,17 @@
+import * as AlarmController from "./AlarmController";
 import * as AuthController from "./AuthController";
 import * as DeviceController from "./DeviceController";
+import * as FishController from "./FishController";
 import * as MapController from "./MapController";
+import * as PortController from "./PortController";
 import * as TripController from "./TripController";
-export { AuthController, DeviceController, MapController, TripController };
+
+export {
+  AlarmController,
+  AuthController,
+  DeviceController,
+  FishController,
+  MapController,
+  PortController,
+  TripController,
+};

controller/typings.d.ts

@@ -9,6 +9,20 @@ declare namespace Model {
     token?: string;
   }
 
+  interface ProfileResponse {
+    id?: string;
+    email?: string;
+    metadata?: ProfileMetadata;
+  }
+
+  interface ProfileMetadata {
+    frontend_thing_id?: string;
+    frontend_thing_key?: string;
+    full_name?: string;
+    phone_number?: string;
+    user_type?: string;
+  }
+
   interface GPSResponse {
     lat: number;
     lon: number;
@@ -336,4 +350,112 @@ declare namespace Model {
     thing_id: string;
     time: number;
   }
+
+  interface ShipBodyRequest {
+    name?: string;
+    reg_number?: string;
+    imo_number?: string;
+    mmsi_number?: string;
+    thing_id?: string;
+    ship_type?: number;
+    owner_id?: string;
+    home_port?: number;
+    ship_length?: number;
+    ship_power?: number;
+    ship_group_id?: string;
+    fishing_license_number?: string;
+    fishing_license_expiry_date?: Date;
+  }
+  interface ShipResponse {
+    ships?: Ship[];
+  }
+
+  interface Ship {
+    id?: string;
+    thing_id?: string;
+    owner_id?: string;
+    name?: string;
+    ship_type?: number;
+    home_port?: number;
+    ship_length?: number;
+    ship_power?: number;
+    reg_number?: string;
+    imo_number?: string;
+    mmsi_number?: string;
+    fishing_license_number?: string;
+    fishing_license_expiry_date?: Date;
+    province_code?: string;
+    ship_group_id?: string;
+    created_at?: Date;
+    updated_at?: Date;
+  }
+
+  interface PortResponse {
+    total?: number;
+    offset?: number;
+    limit?: number;
+    ports?: Port[];
+  }
+
+  interface Port {
+    id?: number;
+    name?: string;
+    type?: Type;
+    classification?: Classification;
+    position_point?: string;
+    has_origin_confirm?: boolean;
+    province_code?: string;
+    updated_at?: Date;
+    is_deleted?: boolean;
+  }
+
+  enum Classification {
+    ChưaXácĐịnh = "Chưa xác định",
+    I = "I",
+    Ii = "II",
+  }
+
+  enum Type {
+    Fishing = "fishing",
+  }
+
+  // Groups
+  interface GroupResponse {
+    total?: number;
+    level?: number;
+    name?: string;
+    groups?: Group[];
+  }
+
+  interface Group {
+    id?: string;
+    name?: string;
+    owner_id?: string;
+    description?: string;
+    metadata?: GroupMetadata;
+    level?: number;
+    path?: string;
+    children?: Child[];
+    created_at?: Date;
+    updated_at?: Date;
+  }
+
+  interface Child {
+    id?: string;
+    name?: string;
+    owner_id?: string;
+    parent_id?: string;
+    description?: string;
+    metadata?: GroupMetadata;
+    level?: number;
+    path?: string;
+    children?: Child[];
+    created_at?: Date;
+    updated_at?: Date;
+  }
+
+  interface GroupMetadata {
+    code?: string;
+    short_name?: string;
+  }
 }

package-lock.json

@@ -20,6 +20,7 @@
         "@react-navigation/native": "^7.1.8",
         "axios": "^1.13.1",
         "babel-plugin-module-resolver": "^5.0.2",
+        "base64-js": "^1.5.1",
         "dayjs": "^1.11.19",
         "eventemitter3": "^5.0.1",
         "expo": "~54.0.20",
@@ -27,7 +28,7 @@
         "expo-constants": "~18.0.10",
         "expo-font": "~14.0.9",
         "expo-haptics": "~15.0.7",
-        "expo-image": "~3.0.10",
+        "expo-image": "~3.0.11",
         "expo-linking": "~8.0.8",
         "expo-localization": "~17.0.7",
         "expo-router": "~6.0.13",
@@ -8546,9 +8547,9 @@
       }
     },
     "node_modules/expo-image": {
-      "version": "3.0.10",
+      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/expo-image/-/expo-image-3.0.10.tgz",
+      "resolved": "https://registry.npmjs.org/expo-image/-/expo-image-3.0.11.tgz",
-      "integrity": "sha512-i4qNCEf9Ur7vDqdfDdFfWnNCAF2efDTdahuDy9iELPS2nzMKBLeeGA2KxYEPuRylGCS96Rwm+SOZJu6INc2ADQ==",
+      "integrity": "sha512-4TudfUCLgYgENv+f48omnU8tjS2S0Pd9EaON5/s1ZUBRwZ7K8acEr4NfvLPSaeXvxW24iLAiyQ7sV7BXQH3RoA==",
       "license": "MIT",
       "peerDependencies": {
         "expo": "*",

package.json

@@ -23,6 +23,7 @@
     "@react-navigation/native": "^7.1.8",
     "axios": "^1.13.1",
     "babel-plugin-module-resolver": "^5.0.2",
+    "base64-js": "^1.5.1",
     "dayjs": "^1.11.19",
     "eventemitter3": "^5.0.1",
     "expo": "~54.0.20",
@@ -30,7 +31,7 @@
     "expo-constants": "~18.0.10",
     "expo-font": "~14.0.9",
     "expo-haptics": "~15.0.7",
-    "expo-image": "~3.0.10",
+    "expo-image": "~3.0.11",
     "expo-linking": "~8.0.8",
     "expo-localization": "~17.0.7",
     "expo-router": "~6.0.13",

state/use-group.ts

@@ -0,0 +1,41 @@
+import {
+  queryChilrentOfGroups,
+  queryUserGroup,
+} from "@/controller/GroupController";
+import { create } from "zustand";
+
+type Groups = {
+  groups: Model.GroupResponse | null;
+  childrenOfGroups?: Model.GroupResponse | null;
+  getChildrenOfGroups: (group_id: string) => Promise<void>;
+  getUserGroups: () => Promise<void>;
+  error: string | null;
+  loading?: boolean;
+};
+
+export const useGroup = create<Groups>((set) => ({
+  groups: null,
+  childrenOfGroups: null,
+  getUserGroups: async () => {
+    try {
+      const response = await queryUserGroup();
+      set({ groups: response.data, loading: false });
+    } catch (error) {
+      console.error("Error when fetch Port: ", error);
+      set({ error: "Failed to fetch Port data", loading: false });
+      set({ groups: null });
+    }
+  },
+  getChildrenOfGroups: async (group_id: string) => {
+    try {
+      set({ loading: true });
+      const response = await queryChilrentOfGroups(group_id);
+      set({ childrenOfGroups: response.data, loading: false });
+    } catch (error) {
+      console.error("Error when fetching children of groups: ", error);
+      set({ error: "Failed to fetch children of groups", loading: false });
+      set({ childrenOfGroups: null });
+    }
+  },
+  error: null,
+}));

state/use-ports.ts

@@ -0,0 +1,32 @@
+import { queryPorts } from "@/controller/PortController";
+import { create } from "zustand";
+
+type Ports = {
+  ports: Model.PortResponse | null;
+  getPorts: () => Promise<void>;
+  error: string | null;
+  loading?: boolean;
+};
+
+export const usePort = create<Ports>((set) => ({
+  ports: null,
+  getPorts: async (body?: Model.SearchThingBody) => {
+    try {
+      if (body === undefined) {
+        body = {
+          offset: 0,
+          limit: 50,
+          dir: "asc",
+          order: "id",
+        };
+      }
+      const response = await queryPorts(body);
+      set({ ports: response.data, loading: false });
+    } catch (error) {
+      console.error("Error when fetch Port: ", error);
+      set({ error: "Failed to fetch Port data", loading: false });
+      set({ ports: null });
+    }
+  },
+  error: null,
+}));

state/use-ship-groups.ts

@@ -0,0 +1,24 @@
+import { queryShipGroups } from "@/controller/DeviceController";
+import { create } from "zustand";
+
+type ShipGroups = {
+  shipGroups: Model.ShipGroup[] | null;
+  getShipGroups: () => Promise<void>;
+  error: string | null;
+  loading?: boolean;
+};
+
+export const useShipGroups = create<ShipGroups>((set) => ({
+  shipGroups: null,
+  getShipGroups: async () => {
+    try {
+      const response = await queryShipGroups();
+      set({ shipGroups: response.data, loading: false });
+    } catch (error) {
+      console.error("Error when fetch Port: ", error);
+      set({ error: "Failed to fetch Port data", loading: false });
+      set({ shipGroups: null });
+    }
+  },
+  error: null,
+}));

state/use-ship.tsx

@@ -0,0 +1,24 @@
+import { queryAllShips } from "@/controller/DeviceController";
+import { create } from "zustand";
+
+type Ship = {
+  ships: Model.Ship[] | null;
+  getShip: () => Promise<void>;
+  error: string | null;
+  loading?: boolean;
+};
+
+export const useShip = create<Ship>((set) => ({
+  ships: null,
+  getShip: async () => {
+    try {
+      const response = await queryAllShips({});
+      set({ ships: response.data?.ships, loading: false });
+    } catch (error) {
+      console.error("Error when fetch Ship: ", error);
+      set({ error: "Failed to fetch Ship data", loading: false });
+      set({ ships: null });
+    }
+  },
+  error: null,
+}));

utils/storage.ts

@@ -1,3 +1,4 @@
+import { ROLE, UID } from "@/constants";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 
 export async function setStorageItem(
@@ -28,3 +29,20 @@ export async function removeStorageItem(key: string): Promise<void> {
     console.error("Error removing storage item:", error);
   }
 }
+
+export async function clearUserStorage() {
+  try {
+    await AsyncStorage.removeItem(UID);
+    await AsyncStorage.removeItem(ROLE);
+  } catch (error) {
+    console.error("Error with clear user Storage: ", error);
+  }
+}
+export async function addUserStorage(userId: string, role: string) {
+  try {
+    setStorageItem(UID, userId);
+    setStorageItem(ROLE, role);
+  } catch (error) {
+    console.error("Error with set user Storage: ", error);
+  }
+}