thêm quét QR đăng nhập, sửa lại logic để gọi api bằng ip thiết bị

app/(tabs)/diary.tsx

@@ -7,16 +7,7 @@ export default function Warning() {
   const [isShowModal, setIsShowModal] = useState(false);
   return (
     <SafeAreaView style={{ flex: 1 }}>
-      <View style={styles.container}>
+      
-        <CreateOrUpdateHaulModal
-          fishingLog={fishingLogData}
-          isVisible={isShowModal}
-          onClose={function (): void {
-            setIsShowModal(false);
-          }}
-        />
-        <Button title="Thêm thu hoạch" onPress={() => setIsShowModal(true)} />
-      </View>
     </SafeAreaView>
   );
 }
@@ -54,118 +45,3 @@ const styles = StyleSheet.create({
   },
 });
 
-const fishingLogData:Model.FishingLog = {
-  fishing_log_id: "124b2701-a5d6-4eb0-ba3b-6789473c14a9",
-  trip_id: "d84caab6-ebb0-4cf7-abf9-31e5617d23b9",
-  start_at: "2025-11-07T10:50:01.693193764Z",
-  end_at: "2025-11-07T10:50:31.693027729Z",
-  start_lat: 11.59141,
-  start_lon: 109.0489,
-  haul_lat: 11.590274,
-  haul_lon: 109.049284,
-  status: 1,
-  weather_description: "Stormy",
-  info: [
-    {
-      fish_species_id: 8,
-      fish_name: "Cá hồng phớn",
-      catch_number: 1309,
-      catch_unit: "kg",
-      fish_size: 173,
-      fish_rarity: 3,
-      fish_condition: "Còn sống",
-      gear_usage: "Câu vàng",
-    },
-    {
-      fish_species_id: 18,
-      fish_name: "Cá đuối quạt",
-      catch_number: 731,
-      catch_unit: "kg",
-      fish_size: 16,
-      fish_rarity: 4,
-      fish_condition: "Chết",
-      gear_usage: "Bẫy lưới",
-    },
-    {
-      fish_species_id: 7,
-      fish_name: "Cá bơn vàng",
-      catch_number: 1224,
-      catch_unit: "kg",
-      fish_size: 12,
-      fish_rarity: 1,
-      fish_condition: "Chết",
-      gear_usage: "",
-    },
-    {
-      fish_species_id: 16,
-      fish_name: "Cá rồng biển",
-      catch_number: 838,
-      catch_unit: "kg",
-      fish_size: 164,
-      fish_rarity: 3,
-      fish_condition: "Chết",
-      gear_usage: "Lưới rê",
-    },
-    {
-      fish_species_id: 9,
-      fish_name: "Cá hổ Napoleon",
-      catch_number: 1410,
-      catch_unit: "kg",
-      fish_size: 104,
-      fish_rarity: 4,
-      fish_condition: "Bị thương",
-      gear_usage: "Câu vàng",
-    },
-    {
-      fish_species_id: 3,
-      fish_name: "Cá chim trắng",
-      catch_number: 1184,
-      catch_unit: "kg",
-      fish_size: 104,
-      fish_rarity: 2,
-      fish_condition: "Còn sống",
-      gear_usage: "",
-    },
-    {
-      fish_species_id: 5,
-      fish_name: "Cá mú đỏ",
-      catch_number: 987,
-      catch_unit: "kg",
-      fish_size: 171,
-      fish_rarity: 2,
-      fish_condition: "Bị thương",
-      gear_usage: "",
-    },
-    {
-      fish_species_id: 13,
-      fish_name: "Cá song đỏ",
-      catch_number: 1676,
-      catch_unit: "kg",
-      fish_size: 99,
-      fish_rarity: 2,
-      fish_condition: "Bị thương",
-      gear_usage: "",
-    },
-    {
-      fish_species_id: 11,
-      fish_name: "Cá ngừ đại dương",
-      catch_number: 462,
-      catch_unit: "kg",
-      fish_size: 11,
-      fish_rarity: 1,
-      fish_condition: "Bị thương",
-      gear_usage: "",
-    },
-    {
-      fish_species_id: 2,
-      fish_name: "Cá nục",
-      catch_number: 496,
-      catch_unit: "kg",
-      fish_size: 125,
-      fish_rarity: 1,
-      fish_condition: "Còn sống",
-      gear_usage: "",
-    },
-  ],
-  sync: true,
-};

app/(tabs)/index.tsx

@@ -46,8 +46,9 @@ export default function HomeScreen() {
   const [circleRadius, setCircleRadius] = useState(100);
   const [zoomLevel, setZoomLevel] = useState(10);
   const [isFirstLoad, setIsFirstLoad] = useState(true);
-  const [polylineCoordinates, setPolylineCoordinates] =
+  const [polylineCoordinates, setPolylineCoordinates] = useState<
-    useState<PolylineWithLabelProps | null>(null);
+    PolylineWithLabelProps[]
+  >([]);
   const [polygonCoordinates, setPolygonCoordinates] = useState<
     PolygonWithLabelProps[]
   >([]);
@@ -69,7 +70,7 @@ export default function HomeScreen() {
       } else {
         setGpsData(null);
         setPolygonCoordinates([]);
-        setPolylineCoordinates(null);
+        setPolylineCoordinates([]);
       }
     };
     const queryAlarmData = (alarmData: Model.AlarmResponse) => {
@@ -121,7 +122,7 @@ export default function HomeScreen() {
   }, []);
 
   useEffect(() => {
-    setPolylineCoordinates(null);
+    setPolylineCoordinates([]);
     setPolygonCoordinates([]);
     if (!entityData) return;
     if (!banzoneData) return;
@@ -139,11 +140,14 @@ export default function HomeScreen() {
       }
       // Nếu danh sách zone rỗng, clear tất cả
       if (zones.length === 0) {
-        setPolylineCoordinates(null);
+        setPolylineCoordinates([]);
         setPolygonCoordinates([]);
         return;
       }
 
+      let polylines: PolylineWithLabelProps[] = [];
+      let polygons: PolygonWithLabelProps[] = [];
+
       for (const zone of zones) {
         // console.log("Zone Data: ", zone);
         const geom = banzoneData.find((b) => b.id === zone.zone_id);
@@ -161,7 +165,7 @@ export default function HomeScreen() {
             geom_lines || ""
           );
           if (coordinates.length > 0) {
-            setPolylineCoordinates({
+            polylines.push({
               coordinates: coordinates.map((coord) => ({
                 latitude: coord[0],
                 longitude: coord[1],
@@ -169,25 +173,31 @@ export default function HomeScreen() {
               label: zone?.zone_name ?? "",
               content: zone?.message ?? "",
             });
+          } else {
+            console.log("Không tìm thấy polyline trong alarm");
           }
         } else if (geom_type === 1) {
           // foundPolygon = true;
           const coordinates = convertWKTtoLatLngString(geom_poly || "");
           if (coordinates.length > 0) {
             // console.log("Polygon Coordinate: ", coordinates);
-            setPolygonCoordinates(
+            const zonePolygons = coordinates.map((polygon) => ({
-              coordinates.map((polygon) => ({
               coordinates: polygon.map((coord) => ({
                 latitude: coord[0],
                 longitude: coord[1],
               })),
               label: zone?.zone_name ?? "",
               content: zone?.message ?? "",
-              }))
+            }));
-            );
+            polygons.push(...zonePolygons);
+          } else {
+            console.log("Không tìm thấy polygon trong alarm");
           }
         }
       }
+
+      setPolylineCoordinates(polylines);
+      setPolygonCoordinates(polygons);
     }
   }, [banzoneData, entityData]);
 
@@ -301,7 +311,7 @@ export default function HomeScreen() {
             // console.log(`Rendering circle ${index}:`, point);
             return (
               <Circle
-                key={index}
+                key={`circle-${index}`}
                 center={{
                   latitude: point.lat,
                   longitude: point.lon,
@@ -315,27 +325,27 @@ export default function HomeScreen() {
               />
             );
           })}
-        {polylineCoordinates && (
+        {polylineCoordinates.length > 0 && (
+          <>
+            {polylineCoordinates.map((polyline, index) => (
               <PolylineWithLabel
-            key={`polyline-${gpsData?.lat || 0}-${gpsData?.lon || 0}`}
+                key={`polyline-${index}-${gpsData?.lat || 0}-${
-            coordinates={polylineCoordinates.coordinates}
+                  gpsData?.lon || 0
-            label={polylineCoordinates.label}
+                }`}
-            content={polylineCoordinates.content}
+                coordinates={polyline.coordinates}
+                label={polyline.label}
+                content={polyline.content}
                 strokeColor="#FF5733"
                 strokeWidth={4}
                 showDistance={false}
                 // zIndex={50}
               />
+            ))}
+          </>
         )}
         {polygonCoordinates.length > 0 && (
           <>
             {polygonCoordinates.map((polygon, index) => {
-              // Tạo key ổn định từ tọa độ đầu tiên của polygon
-              const polygonKey =
-                polygon.coordinates.length > 0
-                  ? `polygon-${polygon.coordinates[0].latitude}-${polygon.coordinates[0].longitude}-${index}`
-                  : `polygon-${index}`;
-
               return (
                 <PolygonWithLabel
                   key={`polygon-${index}-${gpsData?.lat || 0}-${
@@ -365,11 +375,6 @@ export default function HomeScreen() {
               latitude: gpsData.lat,
               longitude: gpsData.lon,
             }}
-            title={
-              platform === IOS_PLATFORM
-                ? "Tàu của mình - iOS"
-                : "Tàu của mình - Android"
-            }
             zIndex={20}
             anchor={
               platform === IOS_PLATFORM

app/(tabs)/setting.tsx

@@ -4,7 +4,7 @@ import { StyleSheet } from "react-native";
 import { ThemedText } from "@/components/themed-text";
 import { ThemedView } from "@/components/themed-view";
 import { api } from "@/config";
-import { TOKEN } from "@/constants";
+import { DOMAIN, TOKEN } from "@/constants";
 import { removeStorageItem } from "@/utils/storage";
 import { useState } from "react";
 
@@ -37,9 +37,10 @@ export default function SettingScreen() {
       <ThemedText type="title">Settings</ThemedText>
       <ThemedView
         style={styles.button}
-        onTouchEnd={() => {
+        onTouchEnd={async () => {
-          removeStorageItem(TOKEN);
+          await removeStorageItem(TOKEN);
-          router.replace("/auth/login");
+          await removeStorageItem(DOMAIN);
+          router.navigate("/auth/login");
         }}
       >
         <ThemedText type="defaultSemiBold">Đăng xuất</ThemedText>

app/auth/login.tsx

@@ -1,14 +1,16 @@
+import ScanQRCode from "@/components/ScanQRCode";
 import { ThemedText } from "@/components/themed-text";
 import { ThemedView } from "@/components/themed-view";
-import { TOKEN } from "@/constants";
+import { DOMAIN, TOKEN } from "@/constants";
 import { login } from "@/controller/AuthController";
-import { showErrorToast } from "@/services/toast_service";
+import { showErrorToast, showWarningToast } from "@/services/toast_service";
 import {
   getStorageItem,
   removeStorageItem,
   setStorageItem,
 } from "@/utils/storage";
 import { parseJwtToken } from "@/utils/token";
+import { Ionicons, MaterialIcons } from "@expo/vector-icons";
 import { useRouter } from "expo-router";
 import { useCallback, useEffect, useState } from "react";
 import {
@@ -29,22 +31,30 @@ export default function LoginScreen() {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [loading, setLoading] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [isShowingQRScanner, setIsShowingQRScanner] = useState(false);
 
   const checkLogin = useCallback(async () => {
     const token = await getStorageItem(TOKEN);
-    console.log("Token:", token);
+    const domain = await getStorageItem(DOMAIN);
-
+    // console.log("Token:", token);
+    // removeStorageItem(DOMAIN);
+    console.log("Domain:", domain);
     if (!token) {
       return;
     }
+    if (!domain) {
+      return;
+    }
     const parsed = parseJwtToken(token);
-    console.log("Parse Token: ", parsed);
+    // console.log("Parse Token: ", parsed);
 
     const { exp } = parsed;
     const now = Math.floor(Date.now() / 1000);
     const oneHour = 60 * 60;
     if (exp - now < oneHour) {
       await removeStorageItem(TOKEN);
+      await removeStorageItem(DOMAIN);
     } else {
       router.replace("/(tabs)");
     }
@@ -54,9 +64,41 @@ export default function LoginScreen() {
     checkLogin();
   }, [checkLogin]);
 
-  const handleLogin = async () => {
+  const handleQRCodeScanned = async (data: string) => {
+    console.log("QR Code Scanned Data:", data);
+    try {
+      const parsed = JSON.parse(data);
+      if (parsed.username && parsed.password) {
+        // update UI fields
+        setUsername(parsed.username);
+        setPassword(parsed.password);
+        console.log("Domain: ", parsed.device_ip);
+
+        // close scanner so user sees the filled form
+        await setStorageItem(DOMAIN, parsed.device_ip);
+
+        // // call login directly with scanned credentials to avoid waiting for state to update
+        await handleLogin({
+          username: parsed.username,
+          password: parsed.password,
+        });
+      } else {
+        showWarningToast("Mã QR không hợp lệ");
+      }
+    } catch (error) {
+      showWarningToast("Mã QR không hợp lệ");
+    }
+  };
+
+  const handleLogin = async (creds?: {
+    username: string;
+    password: string;
+  }) => {
+    const user = creds?.username ?? username;
+    const pass = creds?.password ?? password;
+
     // Validate input
-    if (!username.trim() || !password.trim()) {
+    if (!user?.trim() || !pass?.trim()) {
       showErrorToast("Vui lòng nhập tài khoản và mật khẩu");
       return;
     }
@@ -64,8 +106,8 @@ export default function LoginScreen() {
     setLoading(true);
     try {
       const body: Model.LoginRequestBody = {
-        username: username,
+        username: user,
-        password: password,
+        password: pass,
       };
 
       const response = await login(body);
@@ -131,25 +173,56 @@ export default function LoginScreen() {
             {/* Password Input */}
             <View style={styles.inputGroup}>
               <ThemedText style={styles.label}>Mật khẩu</ThemedText>
+              <View className="relative">
                 <TextInput
                   style={styles.input}
                   placeholder="Nhập mật khẩu"
                   placeholderTextColor="#999"
                   value={password}
                   onChangeText={setPassword}
-                secureTextEntry
+                  secureTextEntry={!showPassword}
                   editable={!loading}
                   autoCapitalize="none"
                 />
+                {/* Position absolute with top:0 and bottom:0 and justifyContent:center
+                    ensures the icon remains vertically centered inside the input */}
+                <TouchableOpacity
+                  onPress={() => setShowPassword(!showPassword)}
+                  style={{
+                    position: "absolute",
+                    right: 12,
+                    top: 0,
+                    bottom: 0,
+                    justifyContent: "center",
+                    alignItems: "center",
+                    padding: 4,
+                  }}
+                  hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+                >
+                  <Ionicons
+                    name={showPassword ? "eye-off" : "eye"}
+                    size={22}
+                    color="#666"
+                  />
+                </TouchableOpacity>
+              </View>
             </View>
 
-            {/* Login Button */}
+            {/* Login Button (3/4) + QR Scan (1/4) */}
+            <View
+              style={{
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
               <TouchableOpacity
                 style={[
                   styles.loginButton,
                   loading && styles.loginButtonDisabled,
+                  { flex: 5, marginRight: 12, marginTop: 0 },
                 ]}
-              onPress={handleLogin}
+                onPress={() => handleLogin()}
                 disabled={loading}
               >
                 {loading ? (
@@ -159,6 +232,29 @@ export default function LoginScreen() {
                 )}
               </TouchableOpacity>
 
+              <TouchableOpacity
+                style={{
+                  flex: 1,
+                  paddingVertical: 10,
+                  marginTop: 0,
+                  borderColor: "#ddd",
+                  borderWidth: 1,
+                  borderRadius: 8,
+                  backgroundColor: "transparent",
+                  justifyContent: "center",
+                  alignItems: "center",
+                }}
+                onPress={() => setIsShowingQRScanner(true)}
+                disabled={loading}
+              >
+                <MaterialIcons
+                  name="qr-code-scanner"
+                  size={28}
+                  color="#007AFF"
+                />
+              </TouchableOpacity>
+            </View>
+
             {/* Footer text */}
             <View style={styles.footerContainer}>
               <ThemedText style={styles.footerText}>
@@ -176,6 +272,11 @@ export default function LoginScreen() {
           </View>
         </ThemedView>
       </ScrollView>
+      <ScanQRCode
+        visible={isShowingQRScanner}
+        onClose={() => setIsShowingQRScanner(false)}
+        onScanned={handleQRCodeScanned}
+      />
     </KeyboardAvoidingView>
   );
 }

components/ScanQRCode.tsx

@@ -23,6 +23,8 @@ export default function ScanQRCode({
   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(() => {
@@ -38,6 +40,13 @@ export default function ScanQRCode({
     }
   }, [visible]);
 
+  // Mỗi khi reset scanned state thì reset luôn ref guard
+  useEffect(() => {
+    if (!scanned) {
+      hasScannedRef.current = false;
+    }
+  }, [scanned]);
+
   const handleBarCodeScanned = ({
     type,
     data,
@@ -45,11 +54,12 @@ export default function ScanQRCode({
     type: string;
     data: string;
   }) => {
-    if (!scanned) {
+    // Nếu đã scan rồi, bỏ qua
+    if (hasScannedRef.current || scanned) return;
+    hasScannedRef.current = true;
     setScanned(true);
     onScanned(data);
     onClose();
-    }
   };
 
   if (!permission) {
@@ -102,7 +112,8 @@ export default function ScanQRCode({
       <CameraView
         ref={cameraRef}
         style={styles.camera}
-        onBarcodeScanned={handleBarCodeScanned}
+        // 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"],
         }}

components/map/SosButton.tsx

@@ -1,9 +1,9 @@
-import { showToastError } from "@/config";
 import {
   queryDeleteSos,
   queryGetSos,
   querySendSosMessage,
 } from "@/controller/DeviceController";
+import { showErrorToast } from "@/services/toast_service";
 import { sosMessage } from "@/utils/sosUtils";
 import { MaterialIcons } from "@expo/vector-icons";
 import { useEffect, useState } from "react";
@@ -108,7 +108,7 @@ const SosButton = () => {
       }
     } catch (error) {
       console.error("Error when send sos: ", error);
-      showToastError("Không thể gửi tín hiệu SOS", "Lỗi");
+      showErrorToast("Không thể gửi tín hiệu SOS");
     }
   };
 

components/tripInfo/NetListTable.tsx

@@ -96,7 +96,12 @@ const NetListTable: React.FC = () => {
 
             {/* Cột Trạng thái */}
             <View style={[styles.cell, styles.statusContainer]}>
-              <View style={styles.statusDot} />
+              <View
+                style={[
+                  styles.statusDot,
+                  { backgroundColor: item.status ? "#2ecc71" : "#FFD600" },
+                ]}
+              />
               <TouchableOpacity
                 onPress={() => handleStatusPress(item.fishing_log_id)}
               >
@@ -125,7 +130,12 @@ const NetListTable: React.FC = () => {
 
             {/* Cột Trạng thái */}
             <View style={[styles.cell, styles.statusContainer]}>
-              <View style={styles.statusDot} />
+              <View
+                style={[
+                  styles.statusDot,
+                  { backgroundColor: item.status ? "#2ecc71" : "#FFD600" },
+                ]}
+              />
               <TouchableOpacity
                 onPress={() => handleStatusPress(item.fishing_log_id)}
               >

components/tripInfo/modal/CreateOrUpdateHaulModal.tsx

@@ -36,6 +36,14 @@ const UNITS_OPTIONS = UNITS.map((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, "Chọn loài cá"),
@@ -47,6 +55,7 @@ const fishItemSchema = z.object({
     .number({ invalid_type_error: "Kích thước phải là số" })
     .positive("Kích thước > 0")
     .optional(),
+  sizeUnit: z.enum(SIZE_UNITS),
 });
 
 // Schema tổng: mảng các item
@@ -60,6 +69,7 @@ const defaultItem = (): FormValues["fish"][number] => ({
   quantity: 1,
   unit: "con",
   size: undefined,
+  sizeUnit: "cm",
 });
 
 const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
@@ -210,6 +220,7 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
         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);
@@ -225,9 +236,11 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
   }, [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}>
+      <View key={item._id} style={[styles.fishCard, { zIndex: cardZIndex }]}>
         {/* Delete + Chevron buttons - top right corner */}
         <View
           style={{
@@ -315,13 +328,13 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
 
         {/* Form - visible when expanded */}
         {isExpanded && (
-          <View style={{ paddingRight: 100 }}>
+          <View style={{ paddingRight: 10 }}>
             {/* Species dropdown */}
             <Controller
               control={control}
               name={`fish.${index}.id`}
               render={({ field: { value, onChange } }) => (
-                <View style={styles.fieldGroup}>
+                <View style={[styles.fieldGroup, { marginTop: 20 }]}>
                   <Text style={styles.label}>Tên cá</Text>
                   <Select
                     options={fishSpecies!.map((fish) => ({
@@ -342,7 +355,9 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
               )}
             />
 
-            {/* Quantity */}
+            {/* 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`}
@@ -356,7 +371,10 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
                         onChangeText={(t) =>
                           onChange(Number(t.replace(/,/g, ".")) || 0)
                         }
-                    style={[styles.input, !isEditing && styles.inputDisabled]}
+                        style={[
+                          styles.input,
+                          !isEditing && styles.inputDisabled,
+                        ]}
                         editable={isEditing}
                       />
                       {errors.fish?.[index]?.quantity && (
@@ -367,8 +385,8 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
                     </View>
                   )}
                 />
-
+              </View>
-            {/* Unit dropdown */}
+              <View style={{ flex: 1 }}>
                 <Controller
                   control={control}
                   name={`fish.${index}.unit`}
@@ -394,14 +412,18 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
                     </View>
                   )}
                 />
+              </View>
+            </View>
 
-            {/* Size (optional) */}
+            {/* 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}>Kích thước (cm) — tùy chọn</Text>
+                      <Text style={styles.label}>Kích thước</Text>
                       <TextInput
                         keyboardType="numeric"
                         value={value ? String(value) : ""}
@@ -409,7 +431,10 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
                         onChangeText={(t) =>
                           onChange(t ? Number(t.replace(/,/g, ".")) : undefined)
                         }
-                    style={[styles.input, !isEditing && styles.inputDisabled]}
+                        style={[
+                          styles.input,
+                          !isEditing && styles.inputDisabled,
+                        ]}
                         editable={isEditing}
                       />
                       {errors.fish?.[index]?.size && (
@@ -421,6 +446,27 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
                   )}
                 />
               </View>
+              <View style={{ flex: 1 }}>
+                <Controller
+                  control={control}
+                  name={`fish.${index}.sizeUnit`}
+                  render={({ field: { value, onChange } }) => (
+                    <View style={styles.fieldGroup}>
+                      <Text style={styles.label}>Đơn vị</Text>
+                      <Select
+                        options={SIZE_UNITS_OPTIONS}
+                        value={value}
+                        onChange={onChange}
+                        placeholder="Chọn đơn vị"
+                        disabled={!isEditing}
+                        listStyle={{ maxHeight: 80 }}
+                      />
+                    </View>
+                  )}
+                />
+              </View>
+            </View>
+          </View>
         )}
       </View>
     );
@@ -447,15 +493,20 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
             <View style={styles.headerButtons}>
               {isEditing ? (
                 <>
+                  {!isCreateMode && (
                     <TouchableOpacity
                       onPress={() => {
                         setIsEditing(false);
                         reset(); // reset to previous values
                       }}
-                    style={[styles.saveButton, { backgroundColor: "#6c757d" }]}
+                      style={[
+                        styles.saveButton,
+                        { backgroundColor: "#6c757d" },
+                      ]}
                     >
                       <Text style={styles.saveButtonText}>Hủy</Text>
                     </TouchableOpacity>
+                  )}
                   <TouchableOpacity
                     onPress={handleSubmit(onSubmit)}
                     style={styles.saveButton}

components/tripInfo/modal/NetDetailModal/components/InfoSection.tsx

@@ -30,7 +30,7 @@ export const InfoSection: React.FC<InfoSectionProps> = ({
     {
       label: "Thời gian kết thúc",
       value:
-        fishingLog.end_at !== "0001-01-01T00:00:00Z"
+        fishingLog.end_at.toString() !== "0001-01-01T00:00:00Z"
           ? new Date(fishingLog.end_at).toLocaleString()
           : "-",
     },

config/auth.ts

@@ -1,4 +1,4 @@
-import { TOKEN } from "@/constants";
+import { DOMAIN, TOKEN } from "@/constants";
 import { removeStorageItem } from "@/utils/storage";
 import { Router } from "expo-router";
 
@@ -17,7 +17,12 @@ export const setRouterInstance = (router: Router) => {
 export const handle401 = () => {
   if (routerInstance) {
     removeStorageItem(TOKEN);
-    (routerInstance as any).replace("/auth/login");
+    removeStorageItem(DOMAIN);
+    // Cancel all pending requests to prevent further API calls
+    if (typeof window !== "undefined" && (window as any).axiosAbortController) {
+      (window as any).axiosAbortController.abort();
+    }
+    routerInstance.navigate("/auth/login");
   } else {
     console.warn("Router instance not set, cannot redirect to login");
   }

config/axios.ts

@@ -1,8 +1,8 @@
-import { TOKEN } from "@/constants";
+import { DOMAIN, TOKEN } from "@/constants";
+import { showErrorToast } from "@/services/toast_service";
 import { getStorageItem } from "@/utils/storage";
 import axios, { AxiosInstance } from "axios";
 import { handle401 } from "./auth";
-import { showToastError } from "./toast";
 
 const codeMessage = {
   200: "The server successfully returned the requested data。",
@@ -38,9 +38,15 @@ api.interceptors.request.use(
   async (config) => {
     // Thêm auth token nếu có
     const token = await getStorageItem(TOKEN);
+    const domain = await getStorageItem(DOMAIN);
+    if (domain) {
+      config.baseURL = `http://${domain}`;
+    }
     if (token) {
       config.headers.Authorization = `${token}`;
     }
+    // console.log("Domain Request: ", config.baseURL);
+
     return config;
   },
   (error) => {
@@ -57,7 +63,9 @@ api.interceptors.response.use(
     if (!error.response) {
       const networkErrorMsg =
         error.message || "Network error - please check connection";
-      showToastError("Lỗi kết nối", networkErrorMsg);
+      showErrorToast("Lỗi kết nối");
+      console.error("Response Network Error: ", networkErrorMsg);
+
       return Promise.reject(error);
     }
 
@@ -70,8 +78,7 @@ api.interceptors.response.use(
       statusText ||
       "Unknown error";
 
-    showToastError(`Lỗi ${status}`, errMsg);
+    showErrorToast(`Lỗi ${status}: ${errMsg}`);
-
     if (status === 401) {
       handle401();
     }

constants/index.ts

@@ -1,5 +1,5 @@
 export const TOKEN = "token";
-export const BASE_URL = "https://sgw-device.gms.vn";
+export const DOMAIN = "domain";
 export const MAP_TRACKPOINTS_ID = "ship-trackpoints";
 export const MAP_POLYLINE_BAN = "ban-polyline";
 export const MAP_POLYGON_BAN = "ban-polygon";