Hiển thị tọa độ và khu vực khi tàu vi phạm

app/(tabs)/_layout.tsx

@@ -12,7 +12,7 @@ export default function TabLayout() {
   const segments = useSegments() as string[];
   const prev = useRef<string | null>(null);
   const currentSegment = segments[1] ?? segments[segments.length - 1] ?? null;
-  const { t, locale } = useI18n();
+  const { t } = useI18n();
   useEffect(() => {
     if (prev.current !== currentSegment) {
       // console.log("Tab changed ->", { from: prev.current, to: currentSegment });
@@ -60,7 +60,11 @@ export default function TabLayout() {
         options={{
           title: t("navigation.manager"),
           tabBarIcon: ({ color }) => (
-            <IconSymbol size={28} name="square.stack.3d.up" color={color} />
+            <IconSymbol
+              size={28}
+              name="square.stack.3d.up.fill"
+              color={color}
+            />
           ),
         }}
       />

app/(tabs)/diary.tsx

@@ -1,71 +1,111 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
-import { Platform, ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import {
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Ionicons } from "@expo/vector-icons";
-import SearchBar from "@/components/diary/SearchBar";
 import FilterButton from "@/components/diary/FilterButton";
 import TripCard from "@/components/diary/TripCard";
 import FilterModal, { FilterValues } from "@/components/diary/FilterModal";
-import { MOCK_TRIPS } from "@/components/diary/mockData";
+import { useThings } from "@/state/use-thing";
+import { useTripsList } from "@/state/use-tripslist";
+import dayjs from "dayjs";
+import { useI18n } from "@/hooks/use-i18n";
+import { useThemeContext } from "@/hooks/use-theme-context";
 
 export default function diary() {
-  const [searchText, setSearchText] = useState("");
+  const { t } = useI18n();
+  const { colors } = useThemeContext();
   const [showFilterModal, setShowFilterModal] = useState(false);
   const [filters, setFilters] = useState<FilterValues>({
     status: null,
     startDate: null,
     endDate: null,
+    selectedShip: null, // Tàu được chọn
   });
 
-  // Filter trips based on search text and filters
+  // Body call API things (đang fix cứng)
-  const filteredTrips = MOCK_TRIPS.filter((trip) => {
+  const payloadThings: Model.SearchThingBody = {
-    // Search filter
+    offset: 0,
-    if (searchText) {
+    limit: 200,
-      const searchLower = searchText.toLowerCase();
+    order: "name",
-      const matchesSearch =
+    dir: "asc",
-        trip.title.toLowerCase().includes(searchLower) ||
+    metadata: {
-        trip.code.toLowerCase().includes(searchLower) ||
+      not_empty: "ship_name, ship_reg_number",
-        trip.vessel.toLowerCase().includes(searchLower) ||
+    },
-        trip.vesselCode.toLowerCase().includes(searchLower);
-
-      if (!matchesSearch) return false;
-    }
-
-    // Status filter
-    if (filters.status && trip.status !== filters.status) {
-      return false;
-    }
-
-    // Date range filter
-    if (filters.startDate || filters.endDate) {
-      const tripDate = new Date(trip.departureDate);
-
-      if (filters.startDate && tripDate < filters.startDate) {
-        return false;
-      }
-
-      if (filters.endDate) {
-        const endOfDay = new Date(filters.endDate);
-        endOfDay.setHours(23, 59, 59, 999);
-        if (tripDate > endOfDay) {
-          return false;
-        }
-      }
-    }
-
-    return true;
-  });
-
-  const handleSearch = (text: string) => {
-    setSearchText(text);
   };
 
+  // Gọi API things
+  const { getThings } = useThings();
+  useEffect(() => {
+    getThings(payloadThings);
+  }, []);
+
+  // State cho payload trips
+  const [payloadTrips, setPayloadTrips] = useState<Model.TripListBody>({
+    name: "",
+    order: "",
+    dir: "desc",
+    offset: 0,
+    limit: 10,
+    metadata: {
+      from: "",
+      to: "",
+      ship_name: "",
+      reg_number: "",
+      province_code: "",
+      owner_id: "",
+      ship_id: "",
+      status: "",
+    },
+  });
+
+  const { tripsList, getTripsList } = useTripsList();
+
+  // Gọi API trips lần đầu
+  useEffect(() => {
+    getTripsList(payloadTrips);
+  }, []);
+
+  // Gọi lại API khi payload thay đổi (do filter)
+  useEffect(() => {
+    getTripsList(payloadTrips);
+    console.log("Payload trips:", payloadTrips);
+  }, [payloadTrips]);
+
   const handleFilter = () => {
     setShowFilterModal(true);
   };
 
   const handleApplyFilters = (newFilters: FilterValues) => {
     setFilters(newFilters);
+
+    // Cập nhật payload với filter mới
+    // Lưu ý: status gửi lên server là string
+    const updatedPayload: Model.TripListBody = {
+      ...payloadTrips,
+      metadata: {
+        ...payloadTrips.metadata,
+        from: newFilters.startDate
+          ? dayjs(newFilters.startDate).startOf("day").toISOString()
+          : "",
+        to: newFilters.endDate
+          ? dayjs(newFilters.endDate).endOf("day").toISOString()
+          : "",
+        // Convert number status sang string để gửi lên server
+        status: newFilters.status !== null ? String(newFilters.status) : "",
+        // Thêm ship_id từ tàu đã chọn
+        ship_name: newFilters.selectedShip?.shipName || "",
+      },
+    };
+
+    setPayloadTrips(updatedPayload);
+    setShowFilterModal(false);
   };
 
   const handleTripPress = (tripId: string) => {
@@ -73,51 +113,105 @@ export default function diary() {
     console.log("Trip pressed:", tripId);
   };
 
+  const handleViewTrip = (tripId: string) => {
+    console.log("View trip:", tripId);
+    // TODO: Navigate to trip detail view
+  };
+
+  const handleEditTrip = (tripId: string) => {
+    console.log("Edit trip:", tripId);
+    // TODO: Navigate to trip edit screen
+  };
+
+  const handleViewTeam = (tripId: string) => {
+    console.log("View team:", tripId);
+    // TODO: Navigate to team management
+  };
+
+  const handleSendTrip = (tripId: string) => {
+    console.log("Send trip:", tripId);
+    // TODO: Send trip for approval
+  };
+
+  const handleDeleteTrip = (tripId: string) => {
+    console.log("Delete trip:", tripId);
+    // TODO: Show confirmation dialog and delete trip
+  };
+
+  // Dynamic styles based on theme
+  const themedStyles = {
+    safeArea: {
+      backgroundColor: colors.background,
+    },
+    titleText: {
+      color: colors.text,
+    },
+    countText: {
+      color: colors.textSecondary,
+    },
+    addButton: {
+      backgroundColor: colors.primary,
+    },
+    emptyText: {
+      color: colors.textSecondary,
+    },
+  };
+
   return (
-    <SafeAreaView style={styles.safeArea}>
+    <SafeAreaView style={[styles.safeArea, themedStyles.safeArea]} edges={["top"]}>
       <View style={styles.container}>
         {/* Header */}
-        <Text style={styles.titleText}>Nhật ký chuyến đi</Text>
+        <Text style={[styles.titleText, themedStyles.titleText]}>{t("diary.title")}</Text>
 
-        {/* Search Bar */}
+        {/* Filter & Add Button Row */}
-        <SearchBar onSearch={handleSearch} style={{marginBottom: 10}}/>
+        <View style={styles.actionRow}>
-
+          <FilterButton
-        {/* Filter Button */}
+            onPress={handleFilter}
-        <FilterButton onPress={handleFilter} />
+            isFiltered={
-
+              filters.status !== null ||
-        {/* Trip Count & Add Button */}
+              filters.startDate !== null ||
-        <View style={styles.headerRow}>
+              filters.endDate !== null ||
-          <Text style={styles.countText}>
+              filters.selectedShip !== null
-            Danh sách chuyến đi ({filteredTrips.length})
+            }
-          </Text>
+          />
           <TouchableOpacity
-            style={styles.addButton}
+            style={[styles.addButton, themedStyles.addButton]}
             onPress={() => console.log("Add trip")}
             activeOpacity={0.7}
           >
             <Ionicons name="add" size={20} color="#FFFFFF" />
-            <Text style={styles.addButtonText}>Thêm chuyến đi</Text>
+            <Text style={styles.addButtonText}>{t("diary.addTrip")}</Text>
           </TouchableOpacity>
         </View>
 
+        {/* Trip Count */}
+        <Text style={[styles.countText, themedStyles.countText]}>
+          {t("diary.tripListCount", { count: tripsList?.total || 0 })}
+        </Text>
+
         {/* Trip List */}
         <ScrollView
           style={styles.scrollView}
           contentContainerStyle={styles.scrollContent}
           showsVerticalScrollIndicator={false}
         >
-          {filteredTrips.map((trip) => (
+          {tripsList?.trips?.map((trip) => (
             <TripCard
               key={trip.id}
               trip={trip}
               onPress={() => handleTripPress(trip.id)}
+              onView={() => handleViewTrip(trip.id)}
+              onEdit={() => handleEditTrip(trip.id)}
+              onTeam={() => handleViewTeam(trip.id)}
+              onSend={() => handleSendTrip(trip.id)}
+              onDelete={() => handleDeleteTrip(trip.id)}
             />
           ))}
 
-          {filteredTrips.length === 0 && (
+          {(!tripsList || !tripsList.trips || tripsList.trips.length === 0) && (
             <View style={styles.emptyState}>
-              <Text style={styles.emptyText}>
+              <Text style={[styles.emptyText, themedStyles.emptyText]}>
-                Không tìm thấy chuyến đi phù hợp
+                {t("diary.noTripsFound")}
               </Text>
             </View>
           )}
@@ -137,24 +231,29 @@ export default function diary() {
 const styles = StyleSheet.create({
   safeArea: {
     flex: 1,
-    backgroundColor: "#F9FAFB",
   },
   container: {
     flex: 1,
-    padding: 16,
+    padding: 10,
   },
   titleText: {
     fontSize: 28,
     fontWeight: "700",
     lineHeight: 36,
-    marginBottom: 20,
+    marginBottom: 10,
-    color: "#111827",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
       default: "System",
     }),
   },
+  actionRow: {
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    gap: 12,
+    marginBottom: 12,
+  },
   headerRow: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -165,17 +264,16 @@ const styles = StyleSheet.create({
   countText: {
     fontSize: 16,
     fontWeight: "600",
-    color: "#374151",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
       default: "System",
     }),
+    marginBottom: 10,
   },
   addButton: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: "#3B82F6",
     paddingHorizontal: 16,
     paddingVertical: 8,
     borderRadius: 8,
@@ -204,7 +302,6 @@ const styles = StyleSheet.create({
   },
   emptyText: {
     fontSize: 16,
-    color: "#9CA3AF",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",

app/(tabs)/index.tsx

@@ -1,46 +1,69 @@
 import DraggablePanel from "@/components/DraggablePanel";
 import IconButton from "@/components/IconButton";
-import type { PolygonWithLabelProps } from "@/components/map/PolygonWithLabel";
+import AlarmList from "@/components/map/AlarmList";
-import type { PolylineWithLabelProps } from "@/components/map/PolylineWithLabel";
 import ShipInfo from "@/components/map/ShipInfo";
 import { TagState, TagStateCallbackPayload } from "@/components/map/TagState";
+import ZoneInMap from "@/components/map/ZoneInMap";
 import ShipSearchForm, {
   SearchShipResponse,
 } from "@/components/ShipSearchForm";
+import { ThemedText } from "@/components/themed-text";
 import { EVENT_SEARCH_THINGS, IOS_PLATFORM, LIGHT_THEME } from "@/constants";
+import { queryBanzoneById } from "@/controller/MapController";
 import { usePlatform } from "@/hooks/use-platform";
 import { useThemeContext } from "@/hooks/use-theme-context";
 import { searchThingEventBus } from "@/services/device_events";
 import { getShipIcon } from "@/services/map_service";
 import eventBus from "@/utils/eventBus";
-import { AntDesign } from "@expo/vector-icons";
+import { AntDesign, Ionicons } from "@expo/vector-icons";
 import { useEffect, useRef, useState } from "react";
 import {
   Animated,
+  Dimensions,
   Image,
   ScrollView,
   StyleSheet,
   Text,
+  TouchableOpacity,
   View,
 } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import MapView, { Marker } from "react-native-maps";
 
+interface ZoneDataParsed {
+  zone_type?: number;
+  zone_name?: string;
+  zone_id?: string;
+  message?: string;
+  alarm_type?: number;
+  lat?: number;
+  lon?: number;
+  s?: number;
+  h?: number;
+  fishing?: boolean;
+  gps_time?: number;
+}
+export interface AlarmData {
+  thing_id: string;
+  ship_name?: string;
+  zone: ZoneDataParsed;
+  type: "approaching" | "entered" | "fishing";
+}
+
+export interface BanzoneWithAlarm {
+  alarms: AlarmData;
+  zone?: Model.Zone;
+}
+
 export default function HomeScreen() {
-  const [alarmData, setAlarmData] = useState<Model.AlarmResponse | null>(null);
+  const mapRef = useRef<MapView>(null);
-  const [banzoneData, setBanzoneData] = useState<Model.Zone[] | null>(null);
+  const [alarms, setAlarms] = useState<AlarmData[]>([]);
-  const [trackPointsData, setTrackPointsData] = useState<
+  const [banzoneWithAlarm, setBanzoneWithAlarm] =
-    Model.ShipTrackPoint[] | null
+    useState<BanzoneWithAlarm | null>(null);
-  >(null);
+  const [allBanZones, setAllBanZones] = useState<BanzoneWithAlarm[]>([]);
-  const [circleRadius, setCircleRadius] = useState(100);
+  const [showAllAlarmsOnMap, setShowAllAlarmsOnMap] = useState(false);
-  const [zoomLevel, setZoomLevel] = useState(10);
   const [isFirstLoad, setIsFirstLoad] = useState(true);
-  const [polylineCoordinates, setPolylineCoordinates] = useState<
+
-    PolylineWithLabelProps[]
-  >([]);
-  const [polygonCoordinates, setPolygonCoordinates] = useState<
-    PolygonWithLabelProps[]
-  >([]);
   const [shipSearchFormOpen, setShipSearchFormOpen] = useState(false);
   const [isPanelExpanded, setIsPanelExpanded] = useState(false);
   const [things, setThings] = useState<Model.ThingsResponse | null>(null);
@@ -54,15 +77,36 @@ export default function HomeScreen() {
   const [tagStatePayload, setTagStatePayload] =
     useState<TagStateCallbackPayload | null>(null);
 
+  const [isShowAlarmList, setIsShowAlarmList] = useState(false);
+  // Control mount so we can animate close before unmounting
+  const [isAlarmListMounted, setIsAlarmListMounted] = useState(false);
   // Thêm state để quản lý tracksViewChanges
   const [tracksViewChanges, setTracksViewChanges] = useState(true);
 
+  // Alarm list animation
+  const screenHeight = Dimensions.get("window").height;
+  const alarmListHeight = Math.round(screenHeight * 0.3);
+  const alarmTranslateY = useRef(new Animated.Value(alarmListHeight)).current;
+  const alarmOpacity = useRef(new Animated.Value(0)).current;
+  const uiAnim = useRef(new Animated.Value(1)).current; // 1 visible, 0 hidden
+
   useEffect(() => {
     if (tagStatePayload) {
       searchThings();
     }
   }, [tagStatePayload]);
 
+  const openAlarmList = () => {
+    setIsAlarmListMounted(true);
+    setIsShowAlarmList(true);
+  };
+
+  const closeAlarmList = () => {
+    // Trigger the animation; the effect will unmount when complete
+    setIsShowAlarmList(false);
+    setBanzoneWithAlarm(null);
+  };
+
   useEffect(() => {
     if (shipSearchFormData) {
       searchThings();
@@ -73,7 +117,7 @@ export default function HomeScreen() {
     offset: 0,
     limit: 50,
     order: "name",
-    sort: "asc",
+    dir: "asc",
     metadata: {
       not_empty: "ship_id",
     },
@@ -93,7 +137,7 @@ export default function HomeScreen() {
         ...thingsData,
         things: sortedThings,
       };
-      console.log("Things Updated: ", sortedThingsResponse.things?.length);
+      // console.log("Things Updated: ", sortedThingsResponse.things?.length);
 
       setThings(sortedThingsResponse);
     };
@@ -105,101 +149,85 @@ export default function HomeScreen() {
   }, []);
 
   useEffect(() => {
-    if (things) {
+    if (things?.things) {
-      // console.log("Things Updated: ", things.things?.length);
+      const alarmTypes = [
-      // const gpsDatas: Model.GPSResponse[] = [];
+        {
-      // for (const thing of things.things || []) {
+          key: "zone_approaching_alarm_list",
-      //   if (thing.metadata?.gps) {
+          type: "approaching" as const,
-      //     const gps: Model.GPSResponse = JSON.parse(thing.metadata.gps);
+        },
-      //     gpsDatas.push(gps);
+        { key: "zone_entered_alarm_list", type: "entered" as const },
-      //   }
+        { key: "zone_fishing_alarm_list", type: "fishing" as const },
-      // }
+      ];
-      // console.log("GPS Lenght: ", gpsDatas.length);
+
-      // setGpsData(gpsDatas);
+      const newAlarms: AlarmData[] = [];
+
+      for (const thing of things.things) {
+        for (const { key, type } of alarmTypes) {
+          if ((thing.metadata as any)?.[key] != "[]") {
+            const zoneList: ZoneDataParsed[] = JSON.parse(
+              (thing?.metadata as any)?.[key] || "[]"
+            );
+            for (const zone of zoneList) {
+              const alarmData: AlarmData = {
+                thing_id: thing.id || "",
+                ship_name: thing.metadata?.ship_name,
+                zone: zone,
+                type: type,
+              };
+              newAlarms.push(alarmData);
+            }
+          }
+        }
+      }
+
+      // Update alarms, removing old ones not in newAlarms
+      setAlarms((prev) => {
+        const toKeep = prev.filter((a) =>
+          newAlarms.some(
+            (na) =>
+              na.thing_id === a.thing_id && na.zone.zone_id === a.zone.zone_id
+          )
+        );
+        const toAdd = newAlarms.filter(
+          (na) =>
+            !prev.some(
+              (a) =>
+                a.thing_id === na.thing_id && a.zone.zone_id === a.zone.zone_id
+            )
+        );
+        return [...toKeep, ...toAdd];
+      });
     }
   }, [things]);
 
-  // useEffect(() => {
+  useEffect(() => {
-  //   setPolylineCoordinates([]);
+    const approaching = alarms.filter((a) => a.type === "approaching");
-  //   setPolygonCoordinates([]);
+    const entered = alarms.filter((a) => a.type === "entered");
-  //   if (!entityData) return;
+    const fishing = alarms.filter((a) => a.type === "fishing");
-  //   if (!banzoneData) return;
-  //   for (const entity of entityData) {
-  //     if (entity.id !== ENTITY.ZONE_ALARM_LIST) {
-  //       continue;
-  //     }
 
-  //     let zones: any[] = [];
+    if (approaching.length > 0) {
-  //     try {
+      console.log("ZoneApproachingAlarm: ", approaching);
-  //       zones = entity.valueString ? JSON.parse(entity.valueString) : [];
+    } else {
-  //     } catch (parseError) {
+      // console.log("No ZoneApproachingAlarm");
-  //       console.error("Error parsing zone list:", parseError);
+    }
-  //       continue;
+    if (entered.length > 0) {
-  //     }
+      console.log("ZoneEnteredAlarm: ", entered);
-  //     // Nếu danh sách zone rỗng, clear tất cả
+    } else {
-  //     if (zones.length === 0) {
+      // console.log("No ZoneEnteredAlarm");
-  //       setPolylineCoordinates([]);
+    }
-  //       setPolygonCoordinates([]);
+    if (fishing.length > 0) {
-  //       return;
+      console.log("ZoneFishingAlarm: ", fishing);
-  //     }
+    } else {
+      // console.log("No ZoneFishingAlarm");
+    }
+  }, [alarms]);
 
-  //     let polylines: PolylineWithLabelProps[] = [];
+  // Load all banzones when alarms change (for showing all alarms on map)
-  //     let polygons: PolygonWithLabelProps[] = [];
+  useEffect(() => {
-
+    if (alarms.length > 0 && showAllAlarmsOnMap) {
-  //     for (const zone of zones) {
+      loadAllBanZones();
-  //       // console.log("Zone Data: ", zone);
+    }
-  //       const geom = banzoneData.find((b) => b.id === zone.zone_id);
+  }, [alarms, showAllAlarmsOnMap]);
-  //       if (!geom) {
-  //         continue;
-  //       }
-  //       const { geom_type, geom_lines, geom_poly } = geom.geom || {};
-  //       if (typeof geom_type !== "number") {
-  //         continue;
-  //       }
-  //       if (geom_type === 2) {
-  //         // if(oldEntityData.find(e => e.id === ))
-  //         // foundPolyline = true;
-  //         const coordinates = convertWKTLineStringToLatLngArray(
-  //           geom_lines || ""
-  //         );
-  //         if (coordinates.length > 0) {
-  //           polylines.push({
-  //             coordinates: coordinates.map((coord) => ({
-  //               latitude: coord[0],
-  //               longitude: coord[1],
-  //             })),
-  //             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);
-  //           const zonePolygons = 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]);
-
-  // Hàm tính radius cố định khi zoom change
 
   const calculateRadiusFromZoom = (zoom: number) => {
     const baseZoom = 10;
@@ -217,8 +245,8 @@ export default function HomeScreen() {
     // zoom = log2(360 / (latitudeDelta * 2)) + 8
     const zoom = Math.round(Math.log2(360 / (newRegion.latitudeDelta * 2)) + 8);
     const newRadius = calculateRadiusFromZoom(zoom);
-    setCircleRadius(newRadius);
+    // setCircleRadius(newRadius);
-    setZoomLevel(zoom);
+    // setZoomLevel(zoom);
     // console.log("Zoom level:", zoom, "Circle radius:", newRadius);
   };
 
@@ -303,8 +331,53 @@ export default function HomeScreen() {
     }
   }, [isFirstLoad]);
 
+  // Animate alarm panel when isShowAlarmList changes
+  // Keep the overlay mounted while animating it in/out.
+  useEffect(() => {
+    if (isShowAlarmList) {
+      // Ensure mounted then animate to visible
+      setIsAlarmListMounted(true);
+      Animated.parallel([
+        Animated.timing(alarmTranslateY, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        Animated.timing(alarmOpacity, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    } else {
+      // Animate out, then unmount
+      Animated.parallel([
+        Animated.timing(alarmTranslateY, {
+          toValue: alarmListHeight,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        Animated.timing(alarmOpacity, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        setIsAlarmListMounted(false);
+      });
+    }
+  }, [alarmTranslateY, alarmListHeight, alarmOpacity, isShowAlarmList]);
+
+  useEffect(() => {
+    Animated.timing(uiAnim, {
+      toValue: isAlarmListMounted ? 0 : 1,
+      duration: 200,
+      useNativeDriver: true,
+    }).start();
+  }, [uiAnim, isAlarmListMounted]);
+
   const searchThings = async () => {
-    console.log("FormSearch Playload in Search Thing: ", shipSearchFormData);
+    // console.log("FormSearch Playload in Search Thing: ", shipSearchFormData);
 
     // Xây dựng query state dựa trên logic bạn cung cấp
     const stateNormalQuery = tagStatePayload?.isNormal ? "normal" : "";
@@ -384,14 +457,14 @@ export default function HomeScreen() {
       offset: 0,
       limit: 50,
       order: "name",
-      sort: "asc",
+      dir: "asc",
       metadata: {
         ...metaFormQuery,
         ...metaStateQuery,
         not_empty: "ship_id",
       },
     };
-    console.log("Search Params: ", searchParams);
+    // console.log("Search Params: ", searchParams);
 
     // Gọi API tìm kiếm
     searchThingEventBus(searchParams);
@@ -401,6 +474,50 @@ export default function HomeScreen() {
     setShipSearchFormOpen(false);
   };
 
+  const loadAllBanZones = async () => {
+    try {
+      const banzonePromises = alarms.map(async (alarm) => {
+        try {
+          const banzone = await queryBanzoneById(alarm.zone.zone_id || "");
+          return {
+            alarms: alarm,
+            zone: banzone.data,
+          };
+        } catch (error) {
+          console.warn(`Cannot get banzone for zone_id: ${alarm.zone.zone_id}`);
+          return null;
+        }
+      });
+
+      const banzoneResults = await Promise.all(banzonePromises);
+      const validBanZones = banzoneResults.filter(
+        (banzone): banzone is NonNullable<typeof banzone> => banzone !== null
+      );
+      setAllBanZones(validBanZones);
+    } catch (error) {
+      console.error("Error loading all banzones:", error);
+    }
+  };
+
+  const handleAlarmPress = async (alarm: AlarmData) => {
+    console.log("Alarm pressed from list:", alarm);
+    try {
+      const banzone = await queryBanzoneById(alarm.zone.zone_id || "");
+      // console.log("Banzone API response:", banzone);
+      // console.log("Banzone data:", banzone.data);
+      // console.log("Zone geometry:", banzone.data?.geometry);
+      const banzoneWithAlarm: BanzoneWithAlarm = {
+        alarms: alarm,
+        zone: banzone.data,
+      };
+
+      setBanzoneWithAlarm(banzoneWithAlarm);
+      setShowAllAlarmsOnMap(false);
+    } catch (error) {
+      console.error("Cannot get Banzone:", error);
+    }
+  };
+
   const hasActiveFilters = shipSearchFormData
     ? shipSearchFormData.ship_name !== "" ||
       shipSearchFormData.reg_number !== "" ||
@@ -418,6 +535,7 @@ export default function HomeScreen() {
     <GestureHandlerRootView style={styles.container}>
       <View style={styles.container}>
         <MapView
+          ref={mapRef}
           onMapReady={handleMapReady}
           onRegionChangeComplete={handleRegionChangeComplete}
           style={styles.map}
@@ -428,8 +546,9 @@ export default function HomeScreen() {
           loadingEnabled={true}
           mapType={platform === IOS_PLATFORM ? "mutedStandard" : "standard"}
           rotateEnabled={false}
+          // onMarkerPress={onMarkerPress}
         >
-          {things?.things && things.things.length > 0 && (
+          {!banzoneWithAlarm && things?.things && things.things.length > 0 && (
             <>
               {things.things
                 .filter((thing) => thing.metadata?.gps) // Filter trước để tránh null check
@@ -454,6 +573,10 @@ export default function HomeScreen() {
                       }}
                       zIndex={50}
                       anchor={{ x: 0.5, y: 0.5 }}
+                      title={thing.metadata?.ship_name}
+                      description={`Trạng thái: ${
+                        gpsData.fishing ? "Đang đánh bắt" : "Không đánh bắt"
+                      }`}
                       // Chỉ tracks changes khi cần thiết
                       tracksViewChanges={
                         platform === IOS_PLATFORM ? tracksViewChanges : true
@@ -461,6 +584,7 @@ export default function HomeScreen() {
                       // Thêm identifier để iOS optimize
                       identifier={uniqueKey}
                     >
+                      {/* <Callout tooltip></Callout> */}
                       <View className="w-8 h-8 items-center justify-center">
                         <View style={styles.pingContainer}>
                           {thing.metadata?.state_level === 3 && (
@@ -507,9 +631,16 @@ export default function HomeScreen() {
                 })}
             </>
           )}
+          {(banzoneWithAlarm ||
+            (showAllAlarmsOnMap && allBanZones.length > 0)) && (
+            <ZoneInMap
+              banzones={banzoneWithAlarm ? [banzoneWithAlarm] : allBanZones}
+              mapRef={mapRef}
+            />
+          )}
         </MapView>
-        <View className="absolute top-20 left-5">
+        <View className="absolute top-12 left-5">
-          {!isPanelExpanded && (
+          {!isAlarmListMounted && !isPanelExpanded && (
             <IconButton
               icon={<AntDesign name="filter" size={16} />}
               type="primary"
@@ -528,12 +659,13 @@ export default function HomeScreen() {
         <GPSInfoPanel gpsData={gpsData!} /> */}
 
         {/* Draggable Panel */}
+        {!isAlarmListMounted && (
           <DraggablePanel
             minHeightPct={0.1}
             maxHeightPct={0.6}
             initialState="min"
             onExpandedChange={(expanded) => {
-            console.log("Panel expanded:", expanded);
+              // console.log("Panel expanded:", expanded);
               setIsPanelExpanded(expanded);
             }}
           >
@@ -618,12 +750,67 @@ export default function HomeScreen() {
               </View>
             </>
           </DraggablePanel>
+        )}
+        {/* Alarm list overlay */}
+        {isAlarmListMounted && (
+          <Animated.View
+            style={{
+              position: "absolute",
+              left: 0,
+              right: 0,
+              bottom: 0,
+              height: alarmListHeight,
+              transform: [{ translateY: alarmTranslateY }],
+              opacity: alarmOpacity,
+              elevation: 10,
+              zIndex: 10,
+            }}
+          >
+            <View className="bg-white rounded-t-3xl shadow-md overflow-hidden h-full z-50">
+              <View className="flex-row items-center justify-between px-4 py-2">
+                <Text className="text-lg font-semibold">
+                  Danh sách cảnh báo
+                </Text>
+                <TouchableOpacity
+                  onPress={() => closeAlarmList()}
+                  style={{ padding: 6 }}
+                >
+                  <Ionicons name="close" size={20} color="#374151" />
+                </TouchableOpacity>
+              </View>
+              <View
+                style={{
+                  flex: 1,
+                  backgroundColor: "#F9FAFB",
+                  zIndex: 50,
+                }}
+              >
+                {/* <ThemedText className="text-lg font-semibold">Body</ThemedText> */}
+                <AlarmList data={alarms} onPress={handleAlarmPress} />
+              </View>
+            </View>
+          </Animated.View>
+        )}
         <ShipSearchForm
           initialValues={shipSearchFormData}
           isOpen={shipSearchFormOpen}
           onClose={() => setShipSearchFormOpen(false)}
           onSubmit={handleOnSubmitSearchForm}
         />
+        {!isAlarmListMounted && alarms.length > 0 && (
+          <View className="absolute top-12 right-5 space-y-2">
+            <IconButton
+              icon={<Ionicons name="warning" size={16} color="#fff" />}
+              type="danger"
+              size="middle"
+              onPress={() => openAlarmList()}
+            >
+              <ThemedText className="text-sm font-semibold">
+                {alarms.length}
+              </ThemedText>
+            </IconButton>
+          </View>
+        )}
       </View>
     </GestureHandlerRootView>
   );

app/(tabs)/warning.tsx

@@ -1,42 +1,323 @@
-import ShipSearchForm from "@/components/ShipSearchForm";
+import { ThemedText } from "@/components/themed-text";
-import { useState } from "react";
+import { ThemedView } from "@/components/themed-view";
-import { Platform, ScrollView, StyleSheet, Text, View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import dayjs from "dayjs";
+import React, { useCallback, useMemo } from "react";
+import { FlatList, StyleSheet, TouchableOpacity, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
+import { AlarmData } from ".";
+
+// ============ Types ============
+type AlarmType = "approaching" | "entered" | "fishing";
+
+interface AlarmCardProps {
+  alarm: AlarmData;
+  onPress?: () => void;
+}
+
+// ============ Config ============
+const ALARM_CONFIG: Record<
+  AlarmType,
+  {
+    icon: keyof typeof Ionicons.glyphMap;
+    label: string;
+    bgColor: string;
+    borderColor: string;
+    iconBgColor: string;
+    iconColor: string;
+    labelColor: string;
+  }
+> = {
+  entered: {
+    icon: "warning",
+    label: "Xâm nhập",
+    bgColor: "bg-red-50",
+    borderColor: "border-red-200",
+    iconBgColor: "bg-red-100",
+    iconColor: "#DC2626",
+    labelColor: "text-red-600",
+  },
+  approaching: {
+    icon: "alert-circle",
+    label: "Tiếp cận",
+    bgColor: "bg-amber-50",
+    borderColor: "border-amber-200",
+    iconBgColor: "bg-amber-100",
+    iconColor: "#D97706",
+    labelColor: "text-amber-600",
+  },
+  fishing: {
+    icon: "fish",
+    label: "Đánh bắt",
+    bgColor: "bg-orange-50",
+    borderColor: "border-orange-200",
+    iconBgColor: "bg-orange-100",
+    iconColor: "#EA580C",
+    labelColor: "text-orange-600",
+  },
+};
+
+// ============ Helper Functions ============
+const formatTimestamp = (timestamp?: number): string => {
+  if (!timestamp) return "N/A";
+  return dayjs.unix(timestamp).format("DD/MM/YYYY HH:mm:ss");
+};
+
+// ============ AlarmCard Component ============
+const AlarmCard = React.memo(({ alarm, onPress }: AlarmCardProps) => {
+  const config = ALARM_CONFIG[alarm.type];
 
-export default function warning() {
-  const [shipSearchFormOpen, setShipSearchFormOpen] = useState(true);
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <TouchableOpacity
-      <ScrollView contentContainerStyle={styles.scrollContent}>
+      onPress={onPress}
-        <View style={styles.container}>
+      activeOpacity={0.7}
-          <Text style={styles.titleText}>Cảnh báo</Text>
+      className={`rounded-2xl p-4 ${config.bgColor} ${config.borderColor} border shadow-sm`}
+    >
+      <View className="flex-row items-start gap-3">
+        {/* Icon Container */}
+        <View
+          className={`w-12 h-12 rounded-xl items-center justify-center ${config.iconBgColor}`}
+        >
+          <Ionicons name={config.icon} size={24} color={config.iconColor} />
         </View>
-        <ShipSearchForm
+
-          isOpen={shipSearchFormOpen}
+        {/* Content */}
-          onClose={() => setShipSearchFormOpen(false)}
+        <View className="flex-1">
+          {/* Header: Ship name + Badge */}
+          <View className="flex-row items-center justify-between mb-1">
+            <ThemedText className="text-base font-bold text-gray-800 flex-1 mr-2">
+              {alarm.ship_name || alarm.thing_id}
+            </ThemedText>
+            <View className={`px-2 py-1 rounded-full ${config.iconBgColor}`}>
+              <ThemedText
+                className={`text-xs font-semibold ${config.labelColor}`}
+              >
+                {config.label}
+              </ThemedText>
+            </View>
+          </View>
+
+          {/* Zone Info */}
+          <ThemedText className="text-sm text-gray-600 mb-2" numberOfLines={2}>
+            {alarm.zone.message || alarm.zone.zone_name}
+          </ThemedText>
+
+          {/* Footer: Zone ID + Time */}
+          <View className="flex-row items-center justify-between">
+            <View className="flex-row items-center gap-1">
+              <Ionicons name="time-outline" size={20} color="#6B7280" />
+              <ThemedText className="text-xs text-gray-500">
+                {formatTimestamp(alarm.zone.gps_time)}
+              </ThemedText>
+            </View>
+          </View>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+});
+
+AlarmCard.displayName = "AlarmCard";
+
+// ============ Main Component ============
+interface WarningScreenProps {
+  alarms?: AlarmData[];
+}
+
+export default function WarningScreen({ alarms = [] }: WarningScreenProps) {
+  // Mock data for demo - replace with actual props
+  const sampleAlarms: AlarmData[] = useMemo(
+    () => [
+      {
+        thing_id: "SHIP-001",
+        ship_name: "Ocean Star",
+        type: "entered",
+        zone: {
+          zone_type: 1,
+          zone_name: "Khu vực cấm A1",
+          zone_id: "A1",
+          message: "Tàu đã đi vào vùng cấm A1",
+          alarm_type: 1,
+          lat: 10.12345,
+          lon: 106.12345,
+          s: 12,
+          h: 180,
+          fishing: false,
+          gps_time: 1733389200,
+        },
+      },
+      {
+        thing_id: "SHIP-002",
+        ship_name: "Blue Whale",
+        type: "approaching",
+        zone: {
+          zone_type: 2,
+          zone_name: "Vùng cảnh báo B3",
+          zone_id: "B3",
+          message: "Tàu đang tiếp cận khu vực cấm B3",
+          alarm_type: 2,
+          lat: 9.87654,
+          lon: 105.87654,
+          gps_time: 1733389260,
+        },
+      },
+      {
+        thing_id: "SHIP-003",
+        ship_name: "Sea Dragon",
+        type: "fishing",
+        zone: {
+          zone_type: 3,
+          zone_name: "Vùng cấm đánh bắt C2",
+          zone_id: "C2",
+          message: "Phát hiện hành vi đánh bắt trong vùng cấm C2",
+          alarm_type: 3,
+          lat: 11.11223,
+          lon: 107.44556,
+          fishing: true,
+          gps_time: 1733389320,
+        },
+      },
+      {
+        thing_id: "SHIP-004",
+        ship_name: "Red Coral",
+        type: "entered",
+        zone: {
+          zone_type: 1,
+          zone_name: "Khu vực A2",
+          zone_id: "A2",
+          message: "Tàu đã đi sâu vào khu vực A2",
+          alarm_type: 1,
+          gps_time: 1733389380,
+        },
+      },
+      {
+        thing_id: "SHIP-005",
+        ship_name: "Silver Wind",
+        type: "approaching",
+        zone: {
+          zone_type: 2,
+          zone_name: "Vùng B1",
+          zone_id: "B1",
+          message: "Tàu đang tiến gần vào vùng B1",
+          alarm_type: 2,
+          gps_time: 1733389440,
+        },
+      },
+    ],
+    []
+  );
+
+  const displayAlarms = alarms.length > 0 ? alarms : sampleAlarms;
+
+  const handleAlarmPress = useCallback((alarm: AlarmData) => {
+    console.log("Alarm pressed:", alarm);
+    // TODO: Navigate to alarm detail or show modal
+  }, []);
+
+  const renderAlarmCard = useCallback(
+    ({ item }: { item: AlarmData }) => (
+      <AlarmCard alarm={item} onPress={() => handleAlarmPress(item)} />
+    ),
+    [handleAlarmPress]
+  );
+
+  const keyExtractor = useCallback(
+    (item: AlarmData, index: number) => `${item.thing_id}-${index}`,
+    []
+  );
+
+  const ItemSeparator = useCallback(() => <View className="h-3" />, []);
+
+  // Count alarms by type
+  const alarmCounts = useMemo(() => {
+    return displayAlarms.reduce((acc, alarm) => {
+      acc[alarm.type] = (acc[alarm.type] || 0) + 1;
+      return acc;
+    }, {} as Record<AlarmType, number>);
+  }, [displayAlarms]);
+
+  return (
+    <SafeAreaView style={styles.container} edges={["top"]}>
+      <ThemedView style={styles.content}>
+        {/* Header */}
+        <View style={styles.header}>
+          <View className="flex-row items-center gap-3">
+            <View className="w-10 h-10 rounded-xl bg-red-500 items-center justify-center">
+              <Ionicons name="warning" size={22} color="#fff" />
+            </View>
+            <ThemedText style={styles.titleText}>Cảnh báo</ThemedText>
+          </View>
+          <View className="bg-red-500 px-3 py-1 rounded-full">
+            <ThemedText className="text-white text-sm font-semibold">
+              {displayAlarms.length}
+            </ThemedText>
+          </View>
+        </View>
+
+        {/* Stats Bar */}
+        <View className="flex-row px-4 pb-3 gap-2">
+          {(["entered", "approaching", "fishing"] as AlarmType[]).map(
+            (type) => {
+              const config = ALARM_CONFIG[type];
+              const count = alarmCounts[type] || 0;
+              return (
+                <View
+                  key={type}
+                  className={`flex-1 flex-row items-center justify-center gap-1 py-2 rounded-lg ${config.iconBgColor}`}
+                >
+                  <Ionicons
+                    name={config.icon}
+                    size={14}
+                    color={config.iconColor}
                   />
-      </ScrollView>
+                  <ThemedText
+                    className={`text-xs font-medium ${config.labelColor}`}
+                  >
+                    {count}
+                  </ThemedText>
+                </View>
+              );
+            }
+          )}
+        </View>
+
+        {/* Alarm List */}
+        <FlatList
+          data={displayAlarms}
+          renderItem={renderAlarmCard}
+          keyExtractor={keyExtractor}
+          ItemSeparatorComponent={ItemSeparator}
+          contentContainerStyle={styles.listContent}
+          showsVerticalScrollIndicator={false}
+          initialNumToRender={10}
+          maxToRenderPerBatch={10}
+          windowSize={5}
+        />
+      </ThemedView>
     </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
-  scrollContent: {
-    flexGrow: 1,
-  },
   container: {
+    flex: 1,
+  },
+  content: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: "row",
     alignItems: "center",
-    padding: 15,
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    paddingVertical: 16,
   },
   titleText: {
-    fontSize: 32,
+    fontSize: 26,
     fontWeight: "700",
-    lineHeight: 40,
+  },
-    marginBottom: 30,
+  listContent: {
-    fontFamily: Platform.select({
+    paddingHorizontal: 16,
-      ios: "System",
+    paddingBottom: 20,
-      android: "Roboto",
-      default: "System",
-    }),
   },
 });

components/AlarmList.tsx

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

components/alarm/WarningCard.tsx

@@ -0,0 +1,197 @@
+import { Ionicons } from "@expo/vector-icons";
+import dayjs from "dayjs";
+import { FlatList, Text, TouchableOpacity, View } from "react-native";
+
+export type AlarmStatus = "confirmed" | "pending";
+
+export interface AlarmListItem {
+  id: string;
+  code: string;
+  title: string;
+  station: string;
+  timestamp: number;
+  level: 1 | 2 | 3; // 1: warning (yellow), 2: caution (orange/yellow), 3: danger (red)
+  status: AlarmStatus;
+}
+
+type AlarmProp = {
+  alarmsData: AlarmListItem[];
+  onPress?: (alarm: AlarmListItem) => void;
+};
+
+const AlarmList = ({ alarmsData, onPress }: AlarmProp) => {
+  return (
+    <FlatList
+      data={alarmsData}
+      contentContainerStyle={{ paddingHorizontal: 16, paddingVertical: 8 }}
+      ItemSeparatorComponent={() => <View className="h-3" />}
+      renderItem={({ item }) => (
+        <AlarmCard alarm={item} onPress={() => onPress?.(item)} />
+      )}
+      keyExtractor={(item) => item.id}
+      showsVerticalScrollIndicator={false}
+    />
+  );
+};
+
+type AlarmCardProps = {
+  alarm: AlarmListItem;
+  onPress?: () => void;
+};
+
+const AlarmCard = ({ alarm, onPress }: AlarmCardProps) => {
+  const { bgColor, borderColor, iconColor, iconBgColor } = getColorsByLevel(
+    alarm.level
+  );
+  const statusConfig = getStatusConfig(alarm.status);
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      activeOpacity={0.7}
+      className={`rounded-xl p-4 ${bgColor} ${borderColor} border`}
+    >
+      <View className="flex-row justify-between items-start">
+        {/* Left content */}
+        <View className="flex-row flex-1">
+          {/* Icon */}
+          <View
+            className={`w-10 h-10 rounded-full items-center justify-center mr-3 ${iconBgColor}`}
+          >
+            <Ionicons
+              name={getIconByLevel(alarm.level)}
+              size={20}
+              color={iconColor}
+            />
+          </View>
+
+          {/* Info */}
+          <View className="flex-1">
+            {/* Code */}
+            <Text
+              className={`text-xs font-medium mb-1 ${getCodeTextColor(
+                alarm.level
+              )}`}
+            >
+              {alarm.code}
+            </Text>
+
+            {/* Title */}
+            <Text className="text-base font-semibold text-gray-800 mb-2">
+              {alarm.title}
+            </Text>
+
+            {/* Station and Time */}
+            <View className="flex-row">
+              <View className="mr-6">
+                <Text className="text-xs text-gray-400 mb-0.5">Trạm</Text>
+                <Text className="text-sm text-gray-600">{alarm.station}</Text>
+              </View>
+              <View>
+                <Text className="text-xs text-gray-400 mb-0.5">Thời gian</Text>
+                <Text className="text-sm text-gray-600">
+                  {formatTimestamp(alarm.timestamp)}
+                </Text>
+              </View>
+            </View>
+
+            {/* Status Badge */}
+            {/* <View className="mt-3">
+              <View
+                className={`self-start px-3 py-1.5 rounded-full ${statusConfig.bgColor}`}
+              >
+                <Text
+                  className={`text-xs font-medium ${statusConfig.textColor}`}
+                >
+                  {statusConfig.label}
+                </Text>
+              </View>
+            </View> */}
+          </View>
+        </View>
+
+        {/* Checkmark for confirmed */}
+        {/* {alarm.status === "confirmed" && (
+          <View className="w-6 h-6 rounded-full bg-green-500 items-center justify-center">
+            <Ionicons name="checkmark" size={16} color="white" />
+          </View>
+        )} */}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const getColorsByLevel = (level: number) => {
+  switch (level) {
+    case 3: // Danger - Red
+      return {
+        bgColor: "bg-red-50",
+        borderColor: "border-red-200",
+        iconColor: "#DC2626",
+        iconBgColor: "bg-red-100",
+      };
+    case 2: // Caution - Yellow/Orange
+      return {
+        bgColor: "bg-yellow-50",
+        borderColor: "border-yellow-200",
+        iconColor: "#CA8A04",
+        iconBgColor: "bg-yellow-100",
+      };
+    case 1: // Info - Green
+    default:
+      return {
+        bgColor: "bg-green-50",
+        borderColor: "border-green-200",
+        iconColor: "#16A34A",
+        iconBgColor: "bg-green-100",
+      };
+  }
+};
+
+const getIconByLevel = (level: number): keyof typeof Ionicons.glyphMap => {
+  switch (level) {
+    case 3:
+      return "warning";
+    case 2:
+      return "alert-circle";
+    case 1:
+    default:
+      return "checkmark-circle";
+  }
+};
+
+const getCodeTextColor = (level: number) => {
+  switch (level) {
+    case 3:
+      return "text-red-600";
+    case 2:
+      return "text-yellow-600";
+    case 1:
+    default:
+      return "text-green-600";
+  }
+};
+
+const getStatusConfig = (status: AlarmStatus) => {
+  switch (status) {
+    case "confirmed":
+      return {
+        label: "Đã xác nhận",
+        bgColor: "bg-green-100",
+        textColor: "text-green-700",
+      };
+    case "pending":
+    default:
+      return {
+        label: "Chờ xác nhận",
+        bgColor: "bg-yellow-100",
+        textColor: "text-yellow-700",
+      };
+  }
+};
+
+const formatTimestamp = (timestamp: number) => {
+  return dayjs.unix(timestamp).format("YYYY-MM-DD HH:mm");
+};
+
+export default AlarmList;

components/diary/DateRangePicker.tsx

@@ -9,6 +9,8 @@ import {
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import DateTimePicker from "@react-native-community/datetimepicker";
+import { useI18n } from "@/hooks/use-i18n";
+import { useThemeContext } from "@/hooks/use-theme-context";
 
 interface DateRangePickerProps {
   startDate: Date | null;
@@ -23,6 +25,8 @@ export default function DateRangePicker({
   onStartDateChange,
   onEndDateChange,
 }: DateRangePickerProps) {
+  const { t } = useI18n();
+  const { colors, colorScheme } = useThemeContext();
   const [showStartPicker, setShowStartPicker] = useState(false);
   const [showEndPicker, setShowEndPicker] = useState(false);
 
@@ -48,36 +52,65 @@ export default function DateRangePicker({
     }
   };
 
+  // Dynamic styles based on theme
+  const themedStyles = {
+    label: {
+      color: colors.text,
+    },
+    dateInput: {
+      backgroundColor: colors.card,
+      borderColor: colors.border,
+    },
+    dateText: {
+      color: colors.text,
+    },
+    placeholder: {
+      color: colors.textSecondary,
+    },
+    pickerContainer: {
+      backgroundColor: colors.card,
+    },
+    pickerHeader: {
+      borderBottomColor: colors.border,
+    },
+    pickerTitle: {
+      color: colors.text,
+    },
+    cancelButton: {
+      color: colors.textSecondary,
+    },
+  };
+
   return (
     <View style={styles.container}>
-      <Text style={styles.label}>Ngày đi</Text>
+      <Text style={[styles.label, themedStyles.label]}>{t("diary.dateRangePicker.label")}</Text>
       <View style={styles.dateRangeContainer}>
         {/* Start Date */}
         <TouchableOpacity
-          style={styles.dateInput}
+          style={[styles.dateInput, themedStyles.dateInput]}
           onPress={() => setShowStartPicker(true)}
           activeOpacity={0.7}
         >
-          <Text style={[styles.dateText, !startDate && styles.placeholder]}>
+          <Text style={[styles.dateText, themedStyles.dateText, !startDate && themedStyles.placeholder]}>
-            {startDate ? formatDate(startDate) : "Ngày bắt đầu"}
+            {startDate ? formatDate(startDate) : t("diary.dateRangePicker.startDate")}
           </Text>
         </TouchableOpacity>
 
         <Ionicons
           name="arrow-forward"
           size={20}
-          color="#9CA3AF"
+          color={colors.textSecondary}
           style={styles.arrow}
         />
 
         {/* End Date */}
         <TouchableOpacity
-          style={styles.dateInput}
+          style={[styles.dateInput, themedStyles.dateInput]}
           onPress={() => setShowEndPicker(true)}
           activeOpacity={0.7}
         >
-          <Text style={[styles.dateText, !endDate && styles.placeholder]}>
+          <Text style={[styles.dateText, themedStyles.dateText, !endDate && themedStyles.placeholder]}>
-            {endDate ? formatDate(endDate) : "Ngày kết thúc"}
+            {endDate ? formatDate(endDate) : t("diary.dateRangePicker.endDate")}
           </Text>
         </TouchableOpacity>
 
@@ -85,7 +118,7 @@ export default function DateRangePicker({
           style={styles.calendarButton}
           onPress={() => setShowStartPicker(true)}
         >
-          <Ionicons name="calendar-outline" size={20} color="#6B7280" />
+          <Ionicons name="calendar-outline" size={20} color={colors.textSecondary} />
         </TouchableOpacity>
       </View>
 
@@ -93,14 +126,14 @@ export default function DateRangePicker({
       {showStartPicker && (
         <Modal transparent animationType="fade" visible={showStartPicker}>
           <View style={styles.modalOverlay}>
-            <View style={styles.pickerContainer}>
+            <View style={[styles.pickerContainer, themedStyles.pickerContainer]}>
-              <View style={styles.pickerHeader}>
+              <View style={[styles.pickerHeader, themedStyles.pickerHeader]}>
                 <TouchableOpacity onPress={() => setShowStartPicker(false)}>
-                  <Text style={styles.cancelButton}>Hủy</Text>
+                  <Text style={[styles.cancelButton, themedStyles.cancelButton]}>{t("common.cancel")}</Text>
                 </TouchableOpacity>
-                <Text style={styles.pickerTitle}>Chọn ngày bắt đầu</Text>
+                <Text style={[styles.pickerTitle, themedStyles.pickerTitle]}>{t("diary.dateRangePicker.selectStartDate")}</Text>
                 <TouchableOpacity onPress={() => setShowStartPicker(false)}>
-                  <Text style={styles.doneButton}>Xong</Text>
+                  <Text style={styles.doneButton}>{t("diary.dateRangePicker.done")}</Text>
                 </TouchableOpacity>
               </View>
               <DateTimePicker
@@ -109,6 +142,8 @@ export default function DateRangePicker({
                 display={Platform.OS === "ios" ? "spinner" : "default"}
                 onChange={handleStartDateChange}
                 maximumDate={endDate || undefined}
+                themeVariant={colorScheme}
+                textColor={colors.text}
               />
             </View>
           </View>
@@ -119,14 +154,14 @@ export default function DateRangePicker({
       {showEndPicker && (
         <Modal transparent animationType="fade" visible={showEndPicker}>
           <View style={styles.modalOverlay}>
-            <View style={styles.pickerContainer}>
+            <View style={[styles.pickerContainer, themedStyles.pickerContainer]}>
-              <View style={styles.pickerHeader}>
+              <View style={[styles.pickerHeader, themedStyles.pickerHeader]}>
                 <TouchableOpacity onPress={() => setShowEndPicker(false)}>
-                  <Text style={styles.cancelButton}>Hủy</Text>
+                  <Text style={[styles.cancelButton, themedStyles.cancelButton]}>{t("common.cancel")}</Text>
                 </TouchableOpacity>
-                <Text style={styles.pickerTitle}>Chọn ngày kết thúc</Text>
+                <Text style={[styles.pickerTitle, themedStyles.pickerTitle]}>{t("diary.dateRangePicker.selectEndDate")}</Text>
                 <TouchableOpacity onPress={() => setShowEndPicker(false)}>
-                  <Text style={styles.doneButton}>Xong</Text>
+                  <Text style={styles.doneButton}>{t("diary.dateRangePicker.done")}</Text>
                 </TouchableOpacity>
               </View>
               <DateTimePicker
@@ -135,6 +170,8 @@ export default function DateRangePicker({
                 display={Platform.OS === "ios" ? "spinner" : "default"}
                 onChange={handleEndDateChange}
                 minimumDate={startDate || undefined}
+                themeVariant={colorScheme}
+                textColor={colors.text}
               />
             </View>
           </View>
@@ -151,7 +188,6 @@ const styles = StyleSheet.create({
   label: {
     fontSize: 16,
     fontWeight: "600",
-    color: "#111827",
     marginBottom: 8,
     fontFamily: Platform.select({
       ios: "System",
@@ -166,25 +202,19 @@ const styles = StyleSheet.create({
   },
   dateInput: {
     flex: 1,
-    backgroundColor: "#FFFFFF",
     borderWidth: 1,
-    borderColor: "#D1D5DB",
     borderRadius: 8,
     paddingHorizontal: 16,
     paddingVertical: 12,
   },
   dateText: {
     fontSize: 16,
-    color: "#111827",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
       default: "System",
     }),
   },
-  placeholder: {
-    color: "#9CA3AF",
-  },
   arrow: {
     marginHorizontal: 4,
   },
@@ -197,7 +227,6 @@ const styles = StyleSheet.create({
     justifyContent: "flex-end",
   },
   pickerContainer: {
-    backgroundColor: "#FFFFFF",
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
     paddingBottom: 20,
@@ -209,12 +238,10 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
     paddingVertical: 16,
     borderBottomWidth: 1,
-    borderBottomColor: "#F3F4F6",
   },
   pickerTitle: {
     fontSize: 16,
     fontWeight: "600",
-    color: "#111827",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
@@ -223,7 +250,6 @@ const styles = StyleSheet.create({
   },
   cancelButton: {
     fontSize: 16,
-    color: "#6B7280",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
@@ -241,3 +267,4 @@ const styles = StyleSheet.create({
     }),
   },
 });
+

components/diary/FilterButton.tsx

@@ -1,20 +1,53 @@
 import React from "react";
 import { TouchableOpacity, Text, StyleSheet, Platform } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
+import { useI18n } from "@/hooks/use-i18n";
+import { useThemeContext } from "@/hooks/use-theme-context";
 
 interface FilterButtonProps {
   onPress?: () => void;
+  isFiltered?: boolean;
 }
 
-export default function FilterButton({ onPress }: FilterButtonProps) {
+export default function FilterButton({
+  onPress,
+  isFiltered,
+}: FilterButtonProps) {
+  const { t } = useI18n();
+  const { colors } = useThemeContext();
+  
+  const themedStyles = {
+    button: {
+      backgroundColor: colors.card,
+      borderColor: colors.border,
+    },
+    text: {
+      color: isFiltered ? colors.primary : colors.textSecondary,
+    },
+  };
+
   return (
     <TouchableOpacity
-      style={styles.button}
+      style={[styles.button, themedStyles.button]}
       onPress={onPress}
       activeOpacity={0.7}
     >
-      <Ionicons name="filter" size={20} color="#374151" />
+      <Ionicons
-      <Text style={styles.text}>Bộ lọc</Text>
+        name="filter"
+        size={20}
+        color={isFiltered ? colors.primary : colors.textSecondary}
+      />
+      <Text style={[styles.text, themedStyles.text]}>
+        {t("diary.filter")}
+      </Text>
+      {isFiltered && (
+        <Ionicons
+          name="ellipse"
+          size={10}
+          color={colors.primary}
+          style={{ marginLeft: 4 }}
+        />
+      )}
     </TouchableOpacity>
   );
 }
@@ -24,12 +57,10 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: "#FFFFFF",
     borderRadius: 12,
     paddingHorizontal: 20,
     paddingVertical: 12,
     borderWidth: 1,
-    borderColor: "#E5E7EB",
     shadowColor: "#000",
     shadowOffset: {
       width: 0,
@@ -42,7 +73,6 @@ const styles = StyleSheet.create({
   text: {
     fontSize: 16,
     fontWeight: "500",
-    color: "#374151",
     marginLeft: 8,
     fontFamily: Platform.select({
       ios: "System",

components/diary/FilterModal.tsx

@@ -11,7 +11,34 @@ import {
 import { Ionicons } from "@expo/vector-icons";
 import StatusDropdown from "./StatusDropdown";
 import DateRangePicker from "./DateRangePicker";
+import ShipDropdown from "./ShipDropdown";
 import { TripStatus } from "./types";
+import { useI18n } from "@/hooks/use-i18n";
+import { useThemeContext } from "@/hooks/use-theme-context";
+
+// Map status number to string - now uses i18n
+export function useMapStatusNumberToString() {
+  const { t } = useI18n();
+  
+  return (status: TripStatus | null): string => {
+    switch (status) {
+      case 0:
+        return t("diary.tripStatus.created");
+      case 1:
+        return t("diary.tripStatus.pending");
+      case 2:
+        return t("diary.tripStatus.approved");
+      case 3:
+        return t("diary.tripStatus.departed");
+      case 4:
+        return t("diary.tripStatus.completed");
+      case 5:
+        return t("diary.tripStatus.cancelled");
+      default:
+        return "-";
+    }
+  };
+}
 
 interface FilterModalProps {
   visible: boolean;
@@ -19,10 +46,16 @@ interface FilterModalProps {
   onApply: (filters: FilterValues) => void;
 }
 
+export interface ShipOption {
+  id: string;
+  shipName: string;
+}
+
 export interface FilterValues {
-  status: TripStatus | null;
+  status: TripStatus | null; // number (0-5) hoặc null
   startDate: Date | null;
   endDate: Date | null;
+  selectedShip: ShipOption | null; // Tàu được chọn
 }
 
 export default function FilterModal({
@@ -30,22 +63,67 @@ export default function FilterModal({
   onClose,
   onApply,
 }: FilterModalProps) {
+  const { t } = useI18n();
+  const { colors } = useThemeContext();
+  const mapStatusNumberToString = useMapStatusNumberToString();
   const [status, setStatus] = useState<TripStatus | null>(null);
   const [startDate, setStartDate] = useState<Date | null>(null);
   const [endDate, setEndDate] = useState<Date | null>(null);
+  const [selectedShip, setSelectedShip] = useState<ShipOption | null>(null);
 
   const handleReset = () => {
     setStatus(null);
     setStartDate(null);
     setEndDate(null);
+    setSelectedShip(null);
   };
 
   const handleApply = () => {
-    onApply({ status, startDate, endDate });
+    onApply({ status, startDate, endDate, selectedShip });
     onClose();
   };
 
-  const hasFilters = status !== null || startDate !== null || endDate !== null;
+  const hasFilters =
+    status !== null ||
+    startDate !== null ||
+    endDate !== null ||
+    selectedShip !== null;
+
+  const themedStyles = {
+    modalContainer: {
+      backgroundColor: colors.card,
+    },
+    header: {
+      borderBottomColor: colors.separator,
+    },
+    title: {
+      color: colors.text,
+    },
+    previewContainer: {
+      backgroundColor: colors.backgroundSecondary,
+    },
+    previewTitle: {
+      color: colors.textSecondary,
+    },
+    filterTag: {
+      backgroundColor: colors.primary + '20', // 20% opacity
+    },
+    filterTagText: {
+      color: colors.primary,
+    },
+    footer: {
+      borderTopColor: colors.separator,
+    },
+    resetButton: {
+      backgroundColor: colors.backgroundSecondary,
+    },
+    resetButtonText: {
+      color: colors.textSecondary,
+    },
+    applyButton: {
+      backgroundColor: colors.primary,
+    },
+  };
 
   return (
     <Modal
@@ -60,16 +138,16 @@ export default function FilterModal({
         onPress={onClose}
       >
         <TouchableOpacity
-          style={styles.modalContainer}
+          style={[styles.modalContainer, themedStyles.modalContainer]}
           activeOpacity={1}
           onPress={(e) => e.stopPropagation()}
         >
           {/* Header */}
-          <View style={styles.header}>
+          <View style={[styles.header, themedStyles.header]}>
             <TouchableOpacity onPress={onClose} style={styles.closeButton}>
-              <Ionicons name="close" size={24} color="#111827" />
+              <Ionicons name="close" size={24} color={colors.text} />
             </TouchableOpacity>
-            <Text style={styles.title}>Bộ lọc</Text>
+            <Text style={[styles.title, themedStyles.title]}>{t("diary.filter")}</Text>
             <View style={styles.placeholder} />
           </View>
 
@@ -85,29 +163,37 @@ export default function FilterModal({
               onStartDateChange={setStartDate}
               onEndDateChange={setEndDate}
             />
+            <ShipDropdown value={selectedShip} onChange={setSelectedShip} />
 
             {/* Filter Results Preview */}
             {hasFilters && (
-              <View style={styles.previewContainer}>
+              <View style={[styles.previewContainer, themedStyles.previewContainer]}>
-                <Text style={styles.previewTitle}>Bộ lọc đã chọn:</Text>
+                <Text style={[styles.previewTitle, themedStyles.previewTitle]}>{t("diary.selectedFilters")}</Text>
-                {status && (
+                {status !== null && (
-                  <View style={styles.filterTag}>
+                  <View style={[styles.filterTag, themedStyles.filterTag]}>
-                    <Text style={styles.filterTagText}>
+                    <Text style={[styles.filterTagText, themedStyles.filterTagText]}>
-                      Trạng thái: {status}
+                      {t("diary.statusLabel")} {mapStatusNumberToString(status)}
                     </Text>
                   </View>
                 )}
                 {startDate && (
-                  <View style={styles.filterTag}>
+                  <View style={[styles.filterTag, themedStyles.filterTag]}>
-                    <Text style={styles.filterTagText}>
+                    <Text style={[styles.filterTagText, themedStyles.filterTagText]}>
-                      Từ: {startDate.toLocaleDateString("vi-VN")}
+                      {t("diary.fromLabel")} {startDate.toLocaleDateString("vi-VN")}
                     </Text>
                   </View>
                 )}
                 {endDate && (
-                  <View style={styles.filterTag}>
+                  <View style={[styles.filterTag, themedStyles.filterTag]}>
-                    <Text style={styles.filterTagText}>
+                    <Text style={[styles.filterTagText, themedStyles.filterTagText]}>
-                      Đến: {endDate.toLocaleDateString("vi-VN")}
+                      {t("diary.toLabel")} {endDate.toLocaleDateString("vi-VN")}
+                    </Text>
+                  </View>
+                )}
+                {selectedShip && (
+                  <View style={[styles.filterTag, themedStyles.filterTag]}>
+                    <Text style={[styles.filterTagText, themedStyles.filterTagText]}>
+                      {t("diary.shipLabel")} {selectedShip.shipName}
                     </Text>
                   </View>
                 )}
@@ -116,20 +202,20 @@ export default function FilterModal({
           </ScrollView>
 
           {/* Footer */}
-          <View style={styles.footer}>
+          <View style={[styles.footer, themedStyles.footer]}>
             <TouchableOpacity
-              style={styles.resetButton}
+              style={[styles.resetButton, themedStyles.resetButton]}
               onPress={handleReset}
               activeOpacity={0.7}
             >
-              <Text style={styles.resetButtonText}>Đặt lại</Text>
+              <Text style={[styles.resetButtonText, themedStyles.resetButtonText]}>{t("diary.reset")}</Text>
             </TouchableOpacity>
             <TouchableOpacity
-              style={styles.applyButton}
+              style={[styles.applyButton, themedStyles.applyButton]}
               onPress={handleApply}
               activeOpacity={0.7}
             >
-              <Text style={styles.applyButtonText}>Áp dụng</Text>
+              <Text style={styles.applyButtonText}>{t("diary.apply")}</Text>
             </TouchableOpacity>
           </View>
         </TouchableOpacity>
@@ -138,6 +224,7 @@ export default function FilterModal({
   );
 }
 
+
 const styles = StyleSheet.create({
   overlay: {
     flex: 1,
@@ -145,7 +232,6 @@ const styles = StyleSheet.create({
     justifyContent: "flex-end",
   },
   modalContainer: {
-    backgroundColor: "#FFFFFF",
     borderTopLeftRadius: 24,
     borderTopRightRadius: 24,
     maxHeight: "80%",
@@ -165,7 +251,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
     paddingVertical: 16,
     borderBottomWidth: 1,
-    borderBottomColor: "#F3F4F6",
   },
   closeButton: {
     padding: 4,
@@ -173,7 +258,6 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "700",
-    color: "#111827",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
@@ -189,13 +273,11 @@ const styles = StyleSheet.create({
   previewContainer: {
     marginTop: 20,
     padding: 16,
-    backgroundColor: "#F9FAFB",
     borderRadius: 12,
   },
   previewTitle: {
     fontSize: 14,
     fontWeight: "600",
-    color: "#6B7280",
     marginBottom: 12,
     fontFamily: Platform.select({
       ios: "System",
@@ -204,7 +286,6 @@ const styles = StyleSheet.create({
     }),
   },
   filterTag: {
-    backgroundColor: "#EFF6FF",
     paddingHorizontal: 12,
     paddingVertical: 6,
     borderRadius: 16,
@@ -213,7 +294,6 @@ const styles = StyleSheet.create({
   },
   filterTagText: {
     fontSize: 14,
-    color: "#3B82F6",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
@@ -225,11 +305,9 @@ const styles = StyleSheet.create({
     gap: 12,
     padding: 20,
     borderTopWidth: 1,
-    borderTopColor: "#F3F4F6",
   },
   resetButton: {
     flex: 1,
-    backgroundColor: "#F3F4F6",
     paddingVertical: 14,
     borderRadius: 12,
     alignItems: "center",
@@ -237,7 +315,6 @@ const styles = StyleSheet.create({
   resetButtonText: {
     fontSize: 16,
     fontWeight: "600",
-    color: "#6B7280",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
@@ -246,7 +323,6 @@ const styles = StyleSheet.create({
   },
   applyButton: {
     flex: 1,
-    backgroundColor: "#3B82F6",
     paddingVertical: 14,
     borderRadius: 12,
     alignItems: "center",

components/diary/SearchBar.tsx

@@ -1,68 +0,0 @@
-import React, { useState } from "react";
-import { View, TextInput, StyleSheet, Platform, StyleProp, ViewStyle } from "react-native";
-import { Ionicons } from "@expo/vector-icons";
-
-interface SearchBarProps {
-  onSearch?: (text: string) => void;
-  style?: StyleProp<ViewStyle>;
-}
-
-export default function SearchBar({ onSearch, style }: SearchBarProps) {
-  const [searchText, setSearchText] = useState("");
-
-  const handleChangeText = (text: string) => {
-    setSearchText(text);
-    onSearch?.(text);
-  };
-
-  return (
-    <View style={[styles.container, style]}>
-      <Ionicons name="search" size={20} color="#9CA3AF" style={styles.icon} />
-      <TextInput
-        style={styles.input}
-        placeholder="Tìm kiếm chuyến đi, tàu..."
-        placeholderTextColor="#9CA3AF"
-        value={searchText}
-        onChangeText={handleChangeText}
-      />
-      {searchText.length > 0 && (
-        <Ionicons
-          name="close-circle"
-          size={20}
-          color="#9CA3AF"
-          style={styles.clearIcon}
-          onPress={() => handleChangeText("")}
-        />
-      )}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: "#F9FAFB",
-    borderRadius: 12,
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderWidth: 1,
-    borderColor: "#E5E7EB",
-  },
-  icon: {
-    marginRight: 8,
-  },
-  input: {
-    flex: 1,
-    fontSize: 16,
-    color: "#111827",
-    fontFamily: Platform.select({
-      ios: "System",
-      android: "Roboto",
-      default: "System",
-    }),
-  },
-  clearIcon: {
-    marginLeft: 8,
-  },
-});

components/diary/ShipDropdown.tsx

@@ -0,0 +1,280 @@
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Modal,
+  Platform,
+  ScrollView,
+  TextInput,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { useThings } from "@/state/use-thing";
+import { useI18n } from "@/hooks/use-i18n";
+import { useThemeContext } from "@/hooks/use-theme-context";
+
+interface ShipOption {
+  id: string;
+  shipName: string;
+}
+
+interface ShipDropdownProps {
+  value: ShipOption | null;
+  onChange: (value: ShipOption | null) => void;
+}
+
+export default function ShipDropdown({ value, onChange }: ShipDropdownProps) {
+  const { t } = useI18n();
+  const { colors } = useThemeContext();
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchText, setSearchText] = useState("");
+
+  const { things } = useThings();
+
+  // Convert things to ship options, filter out items without id
+  const shipOptions: ShipOption[] =
+    things
+      ?.filter((thing) => thing.id != null)
+      .map((thing) => ({
+        id: thing.id as string,
+        shipName: thing.metadata?.ship_name || "",
+      })) || [];
+
+  // Filter ships based on search text
+  const filteredShips = shipOptions.filter((ship) => {
+    const searchLower = searchText.toLowerCase();
+    return ship.shipName.toLowerCase().includes(searchLower);
+  });
+
+  const handleSelect = (ship: ShipOption | null) => {
+    onChange(ship);
+    setIsOpen(false);
+    setSearchText("");
+  };
+
+  const displayValue = value ? value.shipName : t("diary.shipDropdown.placeholder");
+
+  const themedStyles = {
+    label: { color: colors.text },
+    selector: { backgroundColor: colors.card, borderColor: colors.border },
+    selectorText: { color: colors.text },
+    placeholder: { color: colors.textSecondary },
+    modalContent: { backgroundColor: colors.card },
+    searchContainer: { backgroundColor: colors.backgroundSecondary, borderColor: colors.border },
+    searchInput: { color: colors.text },
+    option: { borderBottomColor: colors.separator },
+    selectedOption: { backgroundColor: colors.backgroundSecondary },
+    optionText: { color: colors.text },
+    emptyText: { color: colors.textSecondary },
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={[styles.label, themedStyles.label]}>{t("diary.shipDropdown.label")}</Text>
+      <TouchableOpacity
+        style={[styles.selector, themedStyles.selector]}
+        onPress={() => setIsOpen(true)}
+        activeOpacity={0.7}
+      >
+        <Text style={[styles.selectorText, themedStyles.selectorText, !value && themedStyles.placeholder]}>
+          {displayValue}
+        </Text>
+        <Ionicons name="chevron-down" size={20} color={colors.textSecondary} />
+      </TouchableOpacity>
+
+      <Modal
+        visible={isOpen}
+        transparent
+        animationType="fade"
+        onRequestClose={() => setIsOpen(false)}
+      >
+        <TouchableOpacity
+          style={styles.modalOverlay}
+          activeOpacity={1}
+          onPress={() => setIsOpen(false)}
+        >
+          <View
+            style={[styles.modalContent, themedStyles.modalContent]}
+            onStartShouldSetResponder={() => true}
+          >
+            {/* Search Input */}
+            <View style={[styles.searchContainer, themedStyles.searchContainer]}>
+              <Ionicons
+                name="search"
+                size={20}
+                color={colors.textSecondary}
+                style={styles.searchIcon}
+              />
+              <TextInput
+                style={[styles.searchInput, themedStyles.searchInput]}
+                placeholder={t("diary.shipDropdown.searchPlaceholder")}
+                placeholderTextColor={colors.textSecondary}
+                value={searchText}
+                onChangeText={setSearchText}
+                autoCapitalize="none"
+              />
+              {searchText.length > 0 && (
+                <TouchableOpacity onPress={() => setSearchText("")}>
+                  <Ionicons name="close-circle" size={20} color={colors.textSecondary} />
+                </TouchableOpacity>
+              )}
+            </View>
+
+            <ScrollView style={styles.optionsList}>
+              {/* "All Ships" option */}
+              <TouchableOpacity
+                style={[
+                  styles.option,
+                  themedStyles.option,
+                  !value && themedStyles.selectedOption,
+                ]}
+                onPress={() => handleSelect(null)}
+              >
+                <Text style={[styles.optionText, themedStyles.optionText]}>
+                  {t("diary.shipDropdown.allShips")}
+                </Text>
+                {!value && (
+                  <Ionicons name="checkmark" size={20} color={colors.primary} />
+                )}
+              </TouchableOpacity>
+
+              {/* Filtered ship options */}
+              {filteredShips.length > 0 ? (
+                filteredShips.map((ship) => (
+                  <TouchableOpacity
+                    key={ship.id}
+                    style={[
+                      styles.option,
+                      themedStyles.option,
+                      value?.id === ship.id && themedStyles.selectedOption,
+                    ]}
+                    onPress={() => handleSelect(ship)}
+                  >
+                    <Text style={[styles.optionText, themedStyles.optionText]}>
+                      {ship.shipName}
+                    </Text>
+                    {value?.id === ship.id && (
+                      <Ionicons name="checkmark" size={20} color={colors.primary} />
+                    )}
+                  </TouchableOpacity>
+                ))
+              ) : (
+                <View style={styles.emptyContainer}>
+                  <Text style={[styles.emptyText, themedStyles.emptyText]}>
+                    {t("diary.shipDropdown.noShipsFound")}
+                  </Text>
+                </View>
+              )}
+            </ScrollView>
+          </View>
+        </TouchableOpacity>
+      </Modal>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 20,
+  },
+  label: {
+    fontSize: 16,
+    fontWeight: "600",
+    marginBottom: 8,
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
+  },
+  selector: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  selectorText: {
+    fontSize: 16,
+    flex: 1,
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  modalContent: {
+    borderRadius: 12,
+    width: "85%",
+    maxHeight: "70%",
+    overflow: "hidden",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 8,
+  },
+  searchContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+  },
+  searchIcon: {
+    marginRight: 8,
+  },
+  searchInput: {
+    flex: 1,
+    fontSize: 16,
+    padding: 0,
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
+  },
+  optionsList: {
+    maxHeight: 350,
+  },
+  option: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+    borderBottomWidth: 1,
+  },
+  optionText: {
+    fontSize: 16,
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
+  },
+  emptyContainer: {
+    paddingVertical: 24,
+    alignItems: "center",
+  },
+  emptyText: {
+    fontSize: 14,
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
+  },
+});

components/diary/StatusDropdown.tsx

@@ -9,47 +9,64 @@ import {
   ScrollView,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
-import { TripStatus, TRIP_STATUS_CONFIG } from "./types";
+import { TripStatus } from "./types";
+import { useI18n } from "@/hooks/use-i18n";
+import { useThemeContext } from "@/hooks/use-theme-context";
 
 interface StatusDropdownProps {
   value: TripStatus | null;
-  onChange: (status: TripStatus | null) => void;
+  onChange: (value: TripStatus | null) => void;
 }
 
-const STATUS_OPTIONS: Array<{ value: TripStatus | null; label: string }> = [
-  { value: null, label: "Vui lòng chọn" },
-  { value: "completed", label: "Hoàn thành" },
-  { value: "in-progress", label: "Đang hoạt động" },
-  { value: "quality-check", label: "Đã khởi tạo" },
-  { value: "cancelled", label: "Đã hủy" },
-];
-
 export default function StatusDropdown({
   value,
   onChange,
 }: StatusDropdownProps) {
+  const { t } = useI18n();
+  const { colors } = useThemeContext();
   const [isOpen, setIsOpen] = useState(false);
 
+  const STATUS_OPTIONS: Array<{ value: TripStatus | null; label: string }> = [
+    { value: null, label: t("diary.statusDropdown.placeholder") },
+    { value: 0, label: t("diary.statusDropdown.created") },
+    { value: 1, label: t("diary.statusDropdown.pending") },
+    { value: 2, label: t("diary.statusDropdown.approved") },
+    { value: 3, label: t("diary.statusDropdown.active") },
+    { value: 4, label: t("diary.statusDropdown.completed") },
+    { value: 5, label: t("diary.statusDropdown.cancelled") },
+  ];
+
   const selectedLabel =
-    STATUS_OPTIONS.find((opt) => opt.value === value)?.label || "Vui lòng chọn";
+    STATUS_OPTIONS.find((opt) => opt.value === value)?.label || t("diary.statusDropdown.placeholder");
 
   const handleSelect = (status: TripStatus | null) => {
     onChange(status);
     setIsOpen(false);
   };
 
+  const themedStyles = {
+    label: { color: colors.text },
+    selector: { backgroundColor: colors.card, borderColor: colors.border },
+    selectorText: { color: colors.text },
+    placeholder: { color: colors.textSecondary },
+    modalContent: { backgroundColor: colors.card },
+    option: { borderBottomColor: colors.separator },
+    selectedOption: { backgroundColor: colors.backgroundSecondary },
+    optionText: { color: colors.text },
+  };
+
   return (
     <View style={styles.container}>
-      <Text style={styles.label}>Trạng thái</Text>
+      <Text style={[styles.label, themedStyles.label]}>{t("diary.statusDropdown.label")}</Text>
       <TouchableOpacity
-        style={styles.selector}
+        style={[styles.selector, themedStyles.selector]}
         onPress={() => setIsOpen(true)}
         activeOpacity={0.7}
       >
-        <Text style={[styles.selectorText, !value && styles.placeholder]}>
+        <Text style={[styles.selectorText, themedStyles.selectorText, !value && themedStyles.placeholder]}>
           {selectedLabel}
         </Text>
-        <Ionicons name="ellipsis-horizontal" size={20} color="#6B7280" />
+        <Ionicons name="ellipsis-horizontal" size={20} color={colors.textSecondary} />
       </TouchableOpacity>
 
       <Modal
@@ -63,27 +80,28 @@ export default function StatusDropdown({
           activeOpacity={1}
           onPress={() => setIsOpen(false)}
         >
-          <View style={styles.modalContent}>
+          <View style={[styles.modalContent, themedStyles.modalContent]}>
             <ScrollView>
               {STATUS_OPTIONS.map((option, index) => (
                 <TouchableOpacity
                   key={index}
                   style={[
                     styles.option,
-                    value === option.value && styles.selectedOption,
+                    themedStyles.option,
+                    value === option.value && themedStyles.selectedOption,
                   ]}
                   onPress={() => handleSelect(option.value)}
                 >
                   <Text
                     style={[
                       styles.optionText,
-                      value === option.value && styles.selectedOptionText,
+                      themedStyles.optionText,
                     ]}
                   >
                     {option.label}
                   </Text>
                   {value === option.value && (
-                    <Ionicons name="checkmark" size={20} color="#3B82F6" />
+                    <Ionicons name="checkmark" size={20} color={colors.primary} />
                   )}
                 </TouchableOpacity>
               ))}
@@ -102,7 +120,6 @@ const styles = StyleSheet.create({
   label: {
     fontSize: 16,
     fontWeight: "600",
-    color: "#111827",
     marginBottom: 8,
     fontFamily: Platform.select({
       ios: "System",
@@ -114,25 +131,19 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    backgroundColor: "#FFFFFF",
     borderWidth: 1,
-    borderColor: "#D1D5DB",
     borderRadius: 8,
     paddingHorizontal: 16,
     paddingVertical: 12,
   },
   selectorText: {
     fontSize: 16,
-    color: "#111827",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
       default: "System",
     }),
   },
-  placeholder: {
-    color: "#9CA3AF",
-  },
   modalOverlay: {
     flex: 1,
     backgroundColor: "rgba(0, 0, 0, 0.5)",
@@ -140,7 +151,6 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   modalContent: {
-    backgroundColor: "#FFFFFF",
     borderRadius: 12,
     width: "80%",
     maxHeight: "60%",
@@ -161,23 +171,13 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
     paddingVertical: 16,
     borderBottomWidth: 1,
-    borderBottomColor: "#F3F4F6",
-    
-  },
-  selectedOption: {
-    backgroundColor: "#EFF6FF",
   },
   optionText: {
     fontSize: 16,
-    color: "#111827",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
       default: "System",
     }),
   },
-  selectedOptionText: {
-    color: "#3B82F6",
-    fontWeight: "600",
-  },
 });

components/diary/TripCard.tsx

@@ -7,18 +7,80 @@ import {
   Platform,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
-import { Trip, TRIP_STATUS_CONFIG } from "./types";
+import { useTripStatusConfig } from "./types";
+import { useThings } from "@/state/use-thing";
+import dayjs from "dayjs";
+import { useI18n } from "@/hooks/use-i18n";
+import { useThemeContext } from "@/hooks/use-theme-context";
 
 interface TripCardProps {
-  trip: Trip;
+  trip: Model.Trip;
   onPress?: () => void;
+  onView?: () => void;
+  onEdit?: () => void;
+  onTeam?: () => void;
+  onSend?: () => void;
+  onDelete?: () => void;
 }
 
-export default function TripCard({ trip, onPress }: TripCardProps) {
+export default function TripCard({
-  const statusConfig = TRIP_STATUS_CONFIG[trip.status];
+  trip,
+  onPress,
+  onView,
+  onEdit,
+  onTeam,
+  onSend,
+  onDelete,
+}: TripCardProps) {
+  const { t } = useI18n();
+  const { colors } = useThemeContext();
+  const { things } = useThings();
+  const TRIP_STATUS_CONFIG = useTripStatusConfig();
+
+  // Tìm thing có id trùng với vms_id của trip
+  const thingOfTrip: Model.Thing | undefined = things?.find(
+    (thing) => thing.id === trip.vms_id
+  );
+
+  // Lấy config status từ trip_status (number)
+  const statusKey = trip.trip_status as keyof typeof TRIP_STATUS_CONFIG;
+  const statusConfig = TRIP_STATUS_CONFIG[statusKey] || {
+    label: "-",
+    bgColor: "#eee",
+    textColor: "#333",
+    icon: "help",
+  };
+
+  // Determine which actions to show based on status
+  const showEdit = trip.trip_status === 0 || trip.trip_status === 1;
+  const showSend = trip.trip_status === 0;
+  const showDelete = trip.trip_status === 1;
+
+  const themedStyles = {
+    card: {
+      backgroundColor: colors.card,
+      borderColor: colors.border,
+    },
+    title: {
+      color: colors.text,
+    },
+    label: {
+      color: colors.textSecondary,
+    },
+    value: {
+      color: colors.text,
+    },
+    divider: {
+      backgroundColor: colors.separator,
+    },
+    actionText: {
+      color: colors.textSecondary,
+    },
+  };
 
   return (
-    <TouchableOpacity style={styles.card} onPress={onPress} activeOpacity={0.7}>
+    <View style={[styles.card, themedStyles.card]}>
+      <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
         {/* Header */}
         <View style={styles.header}>
           <View style={styles.headerLeft}>
@@ -28,8 +90,7 @@ export default function TripCard({ trip, onPress }: TripCardProps) {
               color={statusConfig.textColor}
             />
             <View style={styles.titleContainer}>
-            <Text style={styles.title}>{trip.title}</Text>
+              <Text style={[styles.title, themedStyles.title]}>{trip.name}</Text>
-            <Text style={styles.code}>{trip.code}</Text>
             </View>
           </View>
           <View
@@ -56,34 +117,93 @@ export default function TripCard({ trip, onPress }: TripCardProps) {
         {/* Info Grid */}
         <View style={styles.infoGrid}>
           <View style={styles.infoRow}>
-          <Text style={styles.label}>Tàu</Text>
+            <Text style={[styles.label, themedStyles.label]}>{t("diary.tripCard.shipCode")}</Text>
-          <Text style={styles.value}>
+            <Text style={[styles.value, themedStyles.value]}>
-            {trip.vessel} ({trip.vesselCode})
+              {thingOfTrip?.metadata?.ship_reg_number /* hoặc trip.ship_id */}
             </Text>
           </View>
 
           <View style={styles.infoRow}>
-          <Text style={styles.label}>Khởi hành</Text>
+            <Text style={[styles.label, themedStyles.label]}>{t("diary.tripCard.departure")}</Text>
-          <Text style={styles.value}>{trip.departureDate}</Text>
+            <Text style={[styles.value, themedStyles.value]}>
+              {trip.departure_time
+                ? dayjs(trip.departure_time).format("DD/MM/YYYY HH:mm")
+                : "-"}
+            </Text>
           </View>
 
           <View style={styles.infoRow}>
-          <Text style={styles.label}>Trở về</Text>
+            <Text style={[styles.label, themedStyles.label]}>{t("diary.tripCard.return")}</Text>
-          <Text style={styles.value}>{trip.returnDate || "-"}</Text>
+            {/* FIXME: trip.returnDate không có trong dữ liệu API, cần mapping từ trip.arrival_time */}
-        </View>
+            <Text style={[styles.value, themedStyles.value]}>
-
+              {trip.arrival_time
-        <View style={styles.infoRow}>
+                ? dayjs(trip.arrival_time).format("DD/MM/YYYY HH:mm")
-          <Text style={styles.label}>Thời gian</Text>
+                : "-"}
-          <Text style={[styles.value, styles.duration]}>{trip.duration}</Text>
+            </Text>
           </View>
         </View>
       </TouchableOpacity>
+
+      {/* Action Buttons */}
+      <View style={[styles.divider, themedStyles.divider]} />
+      <View style={styles.actionsContainer}>
+        <TouchableOpacity
+          style={styles.actionButton}
+          onPress={onView}
+          activeOpacity={0.7}
+        >
+          <Ionicons name="eye-outline" size={20} color={colors.textSecondary} />
+          <Text style={[styles.actionText, themedStyles.actionText]}>{t("diary.tripCard.view")}</Text>
+        </TouchableOpacity>
+
+        {showEdit && (
+          <TouchableOpacity
+            style={styles.actionButton}
+            onPress={onEdit}
+            activeOpacity={0.7}
+          >
+            <Ionicons name="create-outline" size={20} color={colors.textSecondary} />
+            <Text style={[styles.actionText, themedStyles.actionText]}>{t("diary.tripCard.edit")}</Text>
+          </TouchableOpacity>
+        )}
+
+        <TouchableOpacity
+          style={styles.actionButton}
+          onPress={onTeam}
+          activeOpacity={0.7}
+        >
+          <Ionicons name="people-outline" size={20} color={colors.textSecondary} />
+          <Text style={[styles.actionText, themedStyles.actionText]}>{t("diary.tripCard.team")}</Text>
+        </TouchableOpacity>
+
+        {showSend && (
+          <TouchableOpacity
+            style={styles.actionButton}
+            onPress={onSend}
+            activeOpacity={0.7}
+          >
+            <Ionicons name="send-outline" size={20} color={colors.textSecondary} />
+            <Text style={[styles.actionText, themedStyles.actionText]}>{t("diary.tripCard.send")}</Text>
+          </TouchableOpacity>
+        )}
+
+        {showDelete && (
+          <TouchableOpacity
+            style={styles.actionButton}
+            onPress={onDelete}
+            activeOpacity={0.7}
+          >
+            <Ionicons name="trash-outline" size={20} color={colors.error} />
+            <Text style={[styles.actionText, styles.deleteText]}>{t("diary.tripCard.delete")}</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+    </View>
   );
 }
 
 const styles = StyleSheet.create({
   card: {
-    backgroundColor: "#FFFFFF",
     borderRadius: 12,
     padding: 16,
     marginBottom: 12,
@@ -96,7 +216,6 @@ const styles = StyleSheet.create({
     shadowRadius: 8,
     elevation: 2,
     borderWidth: 1,
-    borderColor: "#F3F4F6",
   },
   header: {
     flexDirection: "row",
@@ -116,7 +235,6 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 16,
     fontWeight: "600",
-    color: "#111827",
     marginBottom: 2,
     fontFamily: Platform.select({
       ios: "System",
@@ -124,15 +242,7 @@ const styles = StyleSheet.create({
       default: "System",
     }),
   },
-  code: {
+
-    fontSize: 14,
-    color: "#6B7280",
-    fontFamily: Platform.select({
-      ios: "System",
-      android: "Roboto",
-      default: "System",
-    }),
-  },
   badge: {
     paddingHorizontal: 12,
     paddingVertical: 4,
@@ -149,15 +259,15 @@ const styles = StyleSheet.create({
   },
   infoGrid: {
     gap: 12,
+    marginBottom: 12,
   },
   infoRow: {
     flexDirection: "row",
     justifyContent: "space-between",
-    alignItems: "center",
+    paddingVertical: 8,
   },
   label: {
     fontSize: 14,
-    color: "#6B7280",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
@@ -166,16 +276,36 @@ const styles = StyleSheet.create({
   },
   value: {
     fontSize: 14,
-    color: "#111827",
     fontWeight: "500",
-    textAlign: "right",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
       default: "System",
     }),
   },
-  duration: {
+  divider: {
-    color: "#3B82F6",
+    height: 1,
+    marginVertical: 12,
+  },
+  actionsContainer: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+    alignItems: "center",
+  },
+  actionButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+  },
+  actionText: {
+    fontSize: 14,
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
+  },
+  deleteText: {
+    color: "#EF4444",
   },
 });

components/diary/mockData.ts

@@ -1,70 +0,0 @@
-import { Trip } from "./types";
-
-export const MOCK_TRIPS: Trip[] = [
-  {
-    id: "T001",
-    title: "Chuyến đi Hoàng Sa",
-    code: "T001",
-    vessel: "Hải Âu 1",
-    vesselCode: "V001",
-    departureDate: "2025-11-20 06:00",
-    returnDate: "2025-11-27 18:30",
-    duration: "7 ngày 12 giờ",
-    status: "completed",
-  },
-  {
-    id: "T002",
-    title: "Tuần tra vùng biển",
-    code: "T002",
-    vessel: "Bình Minh",
-    vesselCode: "V004",
-    departureDate: "2025-11-26 08:00",
-    returnDate: null,
-    duration: "2 ngày 6 giờ",
-    status: "in-progress",
-  },
-  {
-    id: "T003",
-    title: "Đánh cá Trường Sa",
-    code: "T003",
-    vessel: "Ngọc Lan",
-    vesselCode: "V002",
-    departureDate: "2025-11-15 05:30",
-    returnDate: "2025-11-25 16:00",
-    duration: "10 ngày 10 giờ",
-    status: "completed",
-  },
-  {
-    id: "T004",
-    title: "Vận chuyển hàng hóa",
-    code: "T004",
-    vessel: "Việt Thắng",
-    vesselCode: "V003",
-    departureDate: "2025-11-22 10:00",
-    returnDate: null,
-    duration: "-",
-    status: "cancelled",
-  },
-  {
-    id: "T005",
-    title: "Khảo sát địa chất",
-    code: "T005",
-    vessel: "Thanh Bình",
-    vesselCode: "V005",
-    departureDate: "2025-11-18 07:00",
-    returnDate: "2025-11-23 14:00",
-    duration: "5 ngày 7 giờ",
-    status: "quality-check",
-  },
-  {
-    id: "T006",
-    title: "Đánh cá ven bờ",
-    code: "T006",
-    vessel: "Hải Âu 1",
-    vesselCode: "V001",
-    departureDate: "2025-11-28 04:00",
-    returnDate: null,
-    duration: "6 giờ",
-    status: "in-progress",
-  },
-];

components/diary/types.ts

@@ -1,44 +1,93 @@
+import { useI18n } from "@/hooks/use-i18n";
+
 export type TripStatus =
-  | "completed"
+  | 0 // Đã khởi tạo
-  | "in-progress"
+  | 1 // Chờ duyệt
-  | "cancelled"
+  | 2 // Đã duyệt
-  | "quality-check";
+  | 3 // Đang hoạt động
-
+  | 4 // Hoàn thành
-export interface Trip {
+  | 5; // Đã hủy
-  id: string;
-  title: string;
-  code: string;
-  vessel: string;
-  vesselCode: string;
-  departureDate: string;
-  returnDate: string | null;
-  duration: string;
-  status: TripStatus;
-}
 
+// Static config - dùng khi không cần i18n hoặc ngoài React component
 export const TRIP_STATUS_CONFIG = {
-  completed: {
+  0: {
+    label: "Đã khởi tạo",
+    bgColor: "#F3F4F6", // Gray background
+    textColor: "#4B5563", // Gray text
+    icon: "document-text",
+  },
+  1: {
+    label: "Chờ duyệt",
+    bgColor: "#FEF3C7", // Yellow background
+    textColor: "#92400E", // Dark yellow text
+    icon: "hourglass",
+  },
+  2: {
+    label: "Đã duyệt",
+    bgColor: "#E0E7FF", // Indigo background
+    textColor: "#3730A3", // Dark indigo text
+    icon: "checkmark-done",
+  },
+  3: {
+    label: "Đang hoạt động",
+    bgColor: "#DBEAFE", // Blue background
+    textColor: "#1E40AF", // Dark blue text
+    icon: "sync",
+  },
+  4: {
     label: "Hoàn thành",
+    bgColor: "#D1FAE5", // Green background
+    textColor: "#065F46", // Dark green text
+    icon: "checkmark-circle",
+  },
+  5: {
+    label: "Đã hủy",
+    bgColor: "#FEE2E2", // Red background
+    textColor: "#991B1B", // Dark red text
+    icon: "close-circle",
+  },
+} as const;
+
+// Hook để lấy config với i18n - dùng trong React component
+export function useTripStatusConfig() {
+  const { t } = useI18n();
+
+  return {
+    0: {
+      label: t("diary.statusDropdown.created"),
+      bgColor: "#F3F4F6",
+      textColor: "#4B5563",
+      icon: "document-text",
+    },
+    1: {
+      label: t("diary.statusDropdown.pending"),
+      bgColor: "#FEF3C7",
+      textColor: "#92400E",
+      icon: "hourglass",
+    },
+    2: {
+      label: t("diary.statusDropdown.approved"),
+      bgColor: "#E0E7FF",
+      textColor: "#3730A3",
+      icon: "checkmark-done",
+    },
+    3: {
+      label: t("diary.statusDropdown.active"),
+      bgColor: "#DBEAFE",
+      textColor: "#1E40AF",
+      icon: "sync",
+    },
+    4: {
+      label: t("diary.statusDropdown.completed"),
       bgColor: "#D1FAE5",
       textColor: "#065F46",
       icon: "checkmark-circle",
     },
-  "in-progress": {
+    5: {
-    label: "Đang diễn ra",
+      label: t("diary.statusDropdown.cancelled"),
-    bgColor: "#DBEAFE",
-    textColor: "#1E40AF",
-    icon: "time",
-  },
-  cancelled: {
-    label: "Đã hủy",
       bgColor: "#FEE2E2",
       textColor: "#991B1B",
       icon: "close-circle",
     },
-  "quality-check": {
+  } as const;
-    label: "Khảo sát địa chất",
+}
-    bgColor: "#D1FAE5",
-    textColor: "#065F46",
-    icon: "checkmark-circle",
-  },
-} as const;

components/map/AlarmList.tsx

@@ -0,0 +1,143 @@
+import { AlarmData } from "@/app/(tabs)";
+import { ThemedText } from "@/components/themed-text";
+import { formatTimestamp } from "@/services/time_service";
+import { Ionicons } from "@expo/vector-icons";
+import { useCallback } from "react";
+import { FlatList, TouchableOpacity, View } from "react-native";
+
+// ============ Types ============
+type AlarmType = "approaching" | "entered" | "fishing";
+
+interface AlarmCardProps {
+  alarm: AlarmData;
+  onPress?: () => void;
+}
+
+// ============ Config ============
+const ALARM_CONFIG: Record<
+  AlarmType,
+  {
+    icon: keyof typeof Ionicons.glyphMap;
+    label: string;
+    bgColor: string;
+    borderColor: string;
+    iconBgColor: string;
+    iconColor: string;
+    labelColor: string;
+  }
+> = {
+  entered: {
+    icon: "warning",
+    label: "Xâm nhập",
+    bgColor: "bg-red-50",
+    borderColor: "border-red-200",
+    iconBgColor: "bg-red-100",
+    iconColor: "#DC2626",
+    labelColor: "text-red-600",
+  },
+  approaching: {
+    icon: "alert-circle",
+    label: "Tiếp cận",
+    bgColor: "bg-amber-50",
+    borderColor: "border-amber-200",
+    iconBgColor: "bg-amber-100",
+    iconColor: "#D97706",
+    labelColor: "text-amber-600",
+  },
+  fishing: {
+    icon: "fish",
+    label: "Đánh bắt",
+    bgColor: "bg-orange-50",
+    borderColor: "border-orange-200",
+    iconBgColor: "bg-orange-100",
+    iconColor: "#EA580C",
+    labelColor: "text-orange-600",
+  },
+};
+
+// ============ AlarmCard Component ============
+const AlarmCard = ({ alarm, onPress }: AlarmCardProps) => {
+  const config = ALARM_CONFIG[alarm.type];
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      activeOpacity={0.7}
+      className={`rounded-2xl p-4 ${config.bgColor} ${config.borderColor} border shadow-sm`}
+    >
+      <View className="flex-row items-start gap-3">
+        {/* Icon Container */}
+        <View
+          className={`w-12 h-12 rounded-xl items-center justify-center ${config.iconBgColor}`}
+        >
+          <Ionicons name={config.icon} size={24} color={config.iconColor} />
+        </View>
+
+        {/* Content */}
+        <View className="flex-1">
+          {/* Header: Ship name + Badge */}
+          <View className="flex-row items-center justify-between mb-1">
+            <ThemedText className="text-base font-bold text-gray-800 flex-1 mr-2">
+              {alarm.ship_name || alarm.thing_id}
+            </ThemedText>
+            <View className={`px-2 py-1 rounded-full ${config.iconBgColor}`}>
+              <ThemedText
+                className={`text-xs font-semibold ${config.labelColor}`}
+              >
+                {config.label}
+              </ThemedText>
+            </View>
+          </View>
+
+          {/* Zone Info */}
+          <ThemedText className="text-xs text-gray-600 mb-2" numberOfLines={2}>
+            {alarm.zone.message || alarm.zone.zone_name}
+          </ThemedText>
+
+          {/* Footer: Zone ID + Time */}
+          <View className="flex-row items-center justify-between">
+            <View className="flex-row items-center gap-1">
+              <Ionicons name="time-outline" size={20} color="#6B7280" />
+              <ThemedText className="text-xs text-gray-500">
+                {formatTimestamp(alarm.zone.gps_time)}
+              </ThemedText>
+            </View>
+          </View>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+// ============ Main Component ============
+interface AlarmListProps {
+  data: AlarmData[];
+  onPress?: (alarm: AlarmData) => void;
+}
+
+export default function AlarmList({ data, onPress }: AlarmListProps) {
+  const renderItem = useCallback(
+    ({ item }: { item: AlarmData }) => (
+      <AlarmCard alarm={item} onPress={() => onPress?.(item)} />
+    ),
+    [onPress]
+  );
+
+  const keyExtractor = useCallback(
+    (item: AlarmData, index: number) => `${item.thing_id}-${index}`,
+    []
+  );
+
+  const ItemSeparator = useCallback(() => <View className="h-3" />, []);
+
+  return (
+    <FlatList
+      data={data}
+      renderItem={renderItem}
+      keyExtractor={keyExtractor}
+      ItemSeparatorComponent={ItemSeparator}
+      contentContainerStyle={{ padding: 16 }}
+      showsVerticalScrollIndicator={false}
+    />
+  );
+}

components/map/CircleWithLabel.tsx

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

components/map/MarkerCustom.tsx

@@ -0,0 +1,110 @@
+import { getShipIcon } from "@/services/map_service";
+import React from "react";
+import { Animated, Image, StyleSheet, View } from "react-native";
+import { Marker } from "react-native-maps";
+
+interface MarkerCustomProps {
+  id: string;
+  latitude: number;
+  longitude: number;
+  shipName?: string;
+  description?: string;
+  stateLevel?: number;
+  isFishing?: boolean;
+  heading?: number;
+  zIndex?: number;
+  anchor?: { x: number; y: number };
+  tracksViewChanges?: boolean;
+  identifier?: string;
+  animated?: {
+    scale: Animated.Value;
+    opacity: Animated.Value;
+  };
+}
+
+export const MarkerCustom: React.FC<MarkerCustomProps> = ({
+  id,
+  latitude,
+  longitude,
+  shipName,
+  description,
+  stateLevel = 0,
+  isFishing = false,
+  heading = 0,
+  zIndex = 50,
+  anchor = { x: 0.5, y: 0.5 },
+  tracksViewChanges = false,
+  identifier,
+  animated,
+}) => {
+  const uniqueKey =
+    id || `marker-${latitude.toFixed(6)}-${longitude.toFixed(6)}`;
+
+  return (
+    <Marker
+      key={uniqueKey}
+      coordinate={{
+        latitude,
+        longitude,
+      }}
+      zIndex={zIndex}
+      anchor={anchor}
+      title={shipName}
+      description={description}
+      tracksViewChanges={tracksViewChanges}
+      identifier={identifier || uniqueKey}
+    >
+      <View className="w-8 h-8 items-center justify-center">
+        <View style={styles.pingContainer}>
+          {animated && stateLevel === 3 && (
+            <Animated.View
+              style={[
+                styles.pingCircle,
+                {
+                  transform: [{ scale: animated.scale }],
+                  opacity: animated.opacity,
+                },
+              ]}
+            />
+          )}
+          <Image
+            source={(() => {
+              const icon = getShipIcon(stateLevel, isFishing);
+              return typeof icon === "string" ? { uri: icon } : icon;
+            })()}
+            style={{
+              width: 32,
+              height: 32,
+              transform: [
+                {
+                  rotate: `${
+                    typeof heading === "number" && !isNaN(heading) ? heading : 0
+                  }deg`,
+                },
+              ],
+            }}
+          />
+        </View>
+      </View>
+    </Marker>
+  );
+};
+
+export default MarkerCustom;
+
+const styles = StyleSheet.create({
+  pingContainer: {
+    width: 32,
+    height: 32,
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "visible",
+  },
+  pingCircle: {
+    position: "absolute",
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: "#ED3F27",
+  },
+});

components/map/ZoneInMap.tsx

@@ -0,0 +1,230 @@
+import { BanzoneWithAlarm } from "@/app/(tabs)";
+import {
+  convertWKTLineStringToLatLngArray,
+  convertWKTPointToLatLng,
+  convertWKTtoLatLngString,
+} from "@/utils/geom";
+import React, { useEffect, useMemo } from "react";
+import { CircleWithLabel } from "./CircleWithLabel";
+import { MarkerCustom } from "./MarkerCustom";
+import { PolygonWithLabel } from "./PolygonWithLabel";
+import { PolylineWithLabel } from "./PolylineWithLabel";
+
+import MapView from "react-native-maps";
+
+interface ZoneInMapProps {
+  banzones: BanzoneWithAlarm[];
+  mapRef?: React.RefObject<MapView | null>;
+}
+
+// Helper function to parse zone geometry
+const parseZoneGeometry = (geometryString: string | undefined) => {
+  if (!geometryString) {
+    return null;
+  }
+
+  try {
+    const geometry: Model.Geom = JSON.parse(geometryString);
+    return geometry;
+  } catch (error) {
+    console.warn("Failed to parse geometry:", error);
+    return null;
+  }
+};
+
+const ZoneInMap = (data: ZoneInMapProps) => {
+  const { banzones, mapRef } = data;
+
+  // Auto-focus camera to first alarm location when banzones change
+  useEffect(() => {
+    if (mapRef?.current && banzones.length > 0) {
+      const firstAlarm = banzones[0].alarms;
+      if (
+        firstAlarm.zone.lat !== undefined &&
+        firstAlarm.zone.lon !== undefined
+      ) {
+        setTimeout(() => {
+          mapRef.current?.animateToRegion(
+            {
+              latitude: firstAlarm.zone.lat as number,
+              longitude: firstAlarm.zone.lon as number,
+              latitudeDelta: 0.05,
+              longitudeDelta: 0.05,
+            },
+            1000
+          );
+        }, 500);
+      }
+    }
+  }, [banzones, mapRef]);
+
+  // Parse and render all banzones with their ship markers
+  const allElements = useMemo(() => {
+    const elements: React.ReactNode[] = [];
+
+    console.log("ZoneInMap - banzones received:", banzones);
+
+    banzones.forEach((banzone, banzoneIndex) => {
+      const { zone, alarms } = banzone;
+
+      console.log(`Processing banzone ${banzoneIndex}:`, {
+        zone: zone,
+        alarms: alarms,
+        geometry: zone?.geometry,
+      });
+
+      // Parse geometry with error handling
+      const geometry = parseZoneGeometry(zone?.geometry);
+      if (!geometry) {
+        console.warn(`No geometry for zone ${banzoneIndex}`);
+        return;
+      }
+
+      const { geom_type, geom_lines, geom_poly, geom_point, geom_radius } =
+        geometry;
+
+      console.log(`Parsed geometry for zone ${banzoneIndex}:`, {
+        geom_type,
+        geom_lines: geom_lines?.substring(0, 100) + "...",
+        geom_poly: geom_poly?.substring(0, 100) + "...",
+        geom_point,
+        geom_radius,
+      });
+
+      try {
+        if (geom_type === 2) {
+          // LINESTRING - use PolylineWithLabel
+          // console.log(`Processing LINESTRING for zone ${banzoneIndex}`);
+          const coordinates = convertWKTLineStringToLatLngArray(
+            geom_lines || ""
+          );
+          // console.log(`Converted coordinates:`, coordinates);
+          if (coordinates.length > 0) {
+            elements.push(
+              <PolylineWithLabel
+                key={`line-${zone?.id || banzoneIndex}`}
+                coordinates={coordinates.map((coord) => ({
+                  latitude: coord[0],
+                  longitude: coord[1],
+                }))}
+                label={zone?.name || alarms.zone.zone_name || ""}
+                content={alarms.zone.message || ""}
+              />
+            );
+            // console.log(`Added PolylineWithLabel for zone ${banzoneIndex}`);
+          }
+        } else if (geom_type === 1) {
+          // MULTIPOLYGON - check both geom_poly and geom_lines
+          // console.log(`Processing MULTIPOLYGON for zone ${banzoneIndex}`);
+          ``;
+          // First check if we have actual polygon data
+          if (geom_poly && geom_poly.trim() !== "") {
+            const polygons = convertWKTtoLatLngString(geom_poly);
+            // console.log(`Converted polygons from geom_poly:`, polygons);
+            polygons.forEach((polygon, polygonIndex) => {
+              if (polygon.length > 0) {
+                elements.push(
+                  <PolygonWithLabel
+                    key={`polygon-${zone?.id || banzoneIndex}-${polygonIndex}`}
+                    coordinates={polygon.map((coord) => ({
+                      latitude: coord[0],
+                      longitude: coord[1],
+                    }))}
+                    label={zone?.name || alarms.zone.zone_name || ""}
+                    content={alarms.zone.message || ""}
+                  />
+                );
+                // console.log(
+                // `Added PolygonWithLabel for zone ${banzoneIndex}-${polygonIndex}`
+                // );
+              }
+            });
+          } else if (geom_lines && geom_lines.trim() !== "") {
+            // If no polygon data, treat geom_lines as a line (data inconsistency fix)
+            // console.log(
+            // `No polygon data, processing as LINESTRING from geom_lines`
+            // );
+            const coordinates = convertWKTLineStringToLatLngArray(geom_lines);
+            console.log(`Converted coordinates from geom_lines:`, coordinates);
+            if (coordinates.length > 0) {
+              elements.push(
+                <PolylineWithLabel
+                  key={`line-${zone?.id || banzoneIndex}`}
+                  coordinates={coordinates.map((coord) => ({
+                    latitude: coord[0],
+                    longitude: coord[1],
+                  }))}
+                  label={zone?.name || alarms.zone.zone_name || ""}
+                  content={alarms.zone.message || ""}
+                />
+              );
+              // console.log(
+              // `Added PolylineWithLabel for zone ${banzoneIndex} (from geom_lines)`
+              // );
+            }
+          } else {
+            // console.warn(`No valid geometry data for zone ${banzoneIndex}`);
+          }
+        } else if (geom_type === 3) {
+          // POINT/CIRCLE - use Circle
+          // console.log(`Processing POINT/CIRCLE for zone ${banzoneIndex}`);
+          const point = convertWKTPointToLatLng(geom_point || "");
+          // console.log(`Converted point:`, point, `radius:`, geom_radius);
+          if (point && geom_radius) {
+            elements.push(
+              <CircleWithLabel
+                key={`circle-${zone?.id || banzoneIndex}`}
+                center={{
+                  latitude: point[1], // Note: convertWKTPointToLatLng returns [lng, lat]
+                  longitude: point[0],
+                }}
+                radius={geom_radius}
+                label={zone?.name || alarms.zone.zone_name || ""}
+                content={alarms.zone.message || ""}
+              />
+            );
+            // console.log(`Added Circle for zone ${banzoneIndex}`);
+          }
+        } else {
+          console.warn(
+            `Unknown geom_type ${geom_type} for zone ${banzoneIndex}`
+          );
+        }
+      } catch (error) {
+        console.warn(
+          "Error processing zone geometry for zone",
+          zone?.id,
+          ":",
+          error
+        );
+      }
+
+      // Ship marker for the alarm location
+      if (alarms.zone.lat && alarms.zone.lon) {
+        elements.push(
+          <MarkerCustom
+            key={`ship-${alarms.thing_id || banzoneIndex}`}
+            id={`ship-${alarms.thing_id || banzoneIndex}`}
+            latitude={alarms.zone.lat}
+            longitude={alarms.zone.lon}
+            shipName={alarms.ship_name || "Tàu không xác định"}
+            description={
+              alarms.zone.gps_time
+                ? new Date(alarms.zone.gps_time * 1000).toLocaleString()
+                : ""
+            }
+            heading={alarms.zone.h}
+            zIndex={100}
+          />
+        );
+      }
+    });
+
+    // console.log(`Total elements rendered: ${elements.length}`);
+    return elements;
+  }, [banzones]);
+
+  return <>{allElements}</>;
+};
+
+export default ZoneInMap;

components/ui/icon-symbol.tsx

@@ -31,7 +31,7 @@ const MAPPING = {
   xmark: "close",
   pencil: "edit",
   trash: "delete",
-  "square.stack.3d.up": "layers",
+  "square.stack.3d.up.fill": "layers",
   "bell.fill": "notifications",
 } as IconMapping;
 

constants/index.ts

@@ -42,6 +42,7 @@ export const API_PATH_SHIP_INFO = "/api/sgw/shipinfo";
 export const API_GET_ALL_LAYER = "/api/sgw/geojsonlist";
 export const API_GET_LAYER_INFO = "/api/sgw/geojson";
 export const API_GET_TRIP = "/api/sgw/trip";
+export const API_POST_TRIPSLIST = "api/sgw/tripslist";
 export const API_GET_ALARMS = "/api/io/alarms";
 export const API_UPDATE_TRIP_STATUS = "/api/sgw/tripState";
 export const API_HAUL_HANDLE = "/api/sgw/fishingLog";

controller/MapController.ts

@@ -4,3 +4,7 @@ import { API_GET_ALL_BANZONES } from "@/constants";
 export async function queryBanzones() {
   return api.get<Model.Zone[]>(API_GET_ALL_BANZONES);
 }
+
+export async function queryBanzoneById(zoneId: string) {
+  return api.get<Model.Zone>(`${API_GET_ALL_BANZONES}/${zoneId}`);
+}

controller/TripController.ts

@@ -2,6 +2,7 @@ import { api } from "@/config";
 import {
   API_GET_TRIP,
   API_HAUL_HANDLE,
+  API_POST_TRIPSLIST,
   API_UPDATE_FISHING_LOGS,
   API_UPDATE_TRIP_STATUS,
 } from "@/constants";
@@ -21,3 +22,7 @@ export async function queryStartNewHaul(body: Model.NewFishingLogRequest) {
 export async function queryUpdateFishingLogs(body: Model.FishingLog) {
   return api.put(API_UPDATE_FISHING_LOGS, body);
 }
+
+export async function queryTripsList(body: Model.TripListBody) {
+  return api.post(API_POST_TRIPSLIST, body);
+}

controller/typings.d.ts

@@ -60,7 +60,9 @@ declare namespace Model {
     conditions?: Condition[];
     enabled?: boolean;
     updated_at?: Date;
-    geom?: Geom;
+    geometry?: string;
+    description?: string;
+    province_code?: string;
   }
 
   interface Condition {
@@ -93,7 +95,37 @@ declare namespace Model {
     message?: string;
     started_at?: number;
   }
+
   // Trip
+  // Body API trip
+  interface TripListBody {
+    name?: string;
+    order?: string;
+    dir?: "asc" | "desc";
+    limit: number;
+    offset: number;
+    metadata?: TripRequestMetadata;
+  }
+
+  interface TripRequestMetadata {
+    status?: string;
+    from?: string;
+    to?: string;
+    ship_name?: string;
+    reg_number?: string;
+    province_code?: string;
+    owner_id?: string;
+    ship_id?: string;
+    thing_id?: string;
+  }
+
+  interface TripsListResponse {
+    total?: number;
+    offset?: number;
+    limit?: number;
+    trips?: Trip[];
+  }
+
   interface Trip {
     id: string;
     ship_id: string;
@@ -213,12 +245,13 @@ declare namespace Model {
     vn_law: boolean;
   }
 
-  // Seagateway Owner Appp
+  // Seagateway Owner App
+  // Thing
   interface SearchThingBody {
     offset?: number;
     limit?: number;
     order?: string;
-    sort?: "asc" | "desc";
+    dir?: "asc" | "desc";
     name?: string;
     metadata?: any;
   }

locales/en.json

@@ -60,6 +60,64 @@
       "sendError": "Unable to send SOS signal"
     }
   },
+  "diary": {
+    "title": "Trip Diary",
+    "filter": "Filter",
+    "addTrip": "Add Trip",
+    "tripList": "Trip List",
+    "tripListCount": "Trip List ({{count}})",
+    "noTripsFound": "No matching trips found",
+    "reset": "Reset",
+    "apply": "Apply",
+    "selectedFilters": "Selected filters:",
+    "statusLabel": "Status:",
+    "fromLabel": "From:",
+    "toLabel": "To:",
+    "shipLabel": "Ship:",
+    "statusDropdown": {
+      "label": "Status",
+      "placeholder": "Please select",
+      "created": "Created",
+      "pending": "Pending Approval",
+      "approved": "Approved",
+      "active": "Active",
+      "completed": "Completed",
+      "cancelled": "Cancelled"
+    },
+    "shipDropdown": {
+      "label": "Ship",
+      "placeholder": "Select ship",
+      "allShips": "All ships",
+      "searchPlaceholder": "Search ship...",
+      "noShipsFound": "No matching ships found"
+    },
+    "dateRangePicker": {
+      "label": "Trip Date",
+      "startDate": "Start Date",
+      "endDate": "End Date",
+      "selectStartDate": "Select start date",
+      "selectEndDate": "Select end date",
+      "done": "Done"
+    },
+    "tripCard": {
+      "shipCode": "Ship Code",
+      "departure": "Departure",
+      "return": "Return",
+      "view": "View",
+      "edit": "Edit",
+      "team": "Team",
+      "send": "Send",
+      "delete": "Delete"
+    },
+    "tripStatus": {
+      "created": "Not approved, creating",
+      "pending": "Pending approval",
+      "approved": "Approved",
+      "departed": "Departed",
+      "completed": "Completed",
+      "cancelled": "Cancelled"
+    }
+  },
   "trip": {
     "infoTrip": "Trip Information",
     "createNewTrip": "Create New Trip",

locales/vi.json

@@ -60,6 +60,64 @@
       "sendError": "Không thể gửi tín hiệu SOS"
     }
   },
+  "diary": {
+    "title": "Nhật ký chuyến đi",
+    "filter": "Bộ lọc",
+    "addTrip": "Thêm chuyến đi",
+    "tripList": "Danh sách chuyến đi",
+    "tripListCount": "Danh sách chuyến đi ({{count}})",
+    "noTripsFound": "Không tìm thấy chuyến đi phù hợp",
+    "reset": "Đặt lại",
+    "apply": "Áp dụng",
+    "selectedFilters": "Bộ lọc đã chọn:",
+    "statusLabel": "Trạng thái:",
+    "fromLabel": "Từ:",
+    "toLabel": "Đến:",
+    "shipLabel": "Tàu:",
+    "statusDropdown": {
+      "label": "Trạng thái",
+      "placeholder": "Vui lòng chọn",
+      "created": "Đã khởi tạo",
+      "pending": "Chờ duyệt",
+      "approved": "Đã duyệt",
+      "active": "Đang hoạt động",
+      "completed": "Hoàn thành",
+      "cancelled": "Đã hủy"
+    },
+    "shipDropdown": {
+      "label": "Tàu",
+      "placeholder": "Chọn tàu",
+      "allShips": "Tất cả tàu",
+      "searchPlaceholder": "Tìm kiếm tàu...",
+      "noShipsFound": "Không tìm thấy tàu phù hợp"
+    },
+    "dateRangePicker": {
+      "label": "Ngày đi",
+      "startDate": "Ngày bắt đầu",
+      "endDate": "Ngày kết thúc",
+      "selectStartDate": "Chọn ngày bắt đầu",
+      "selectEndDate": "Chọn ngày kết thúc",
+      "done": "Xong"
+    },
+    "tripCard": {
+      "shipCode": "Mã Tàu",
+      "departure": "Khởi hành",
+      "return": "Trở về",
+      "view": "Xem",
+      "edit": "Sửa",
+      "team": "Đội",
+      "send": "Gửi",
+      "delete": "Xóa"
+    },
+    "tripStatus": {
+      "created": "Chưa phê duyệt, đang tạo",
+      "pending": "Đang gửi yêu cầu phê duyệt, chờ được phê duyệt",
+      "approved": "Đã phê duyệt",
+      "departed": "Đã xuất bến",
+      "completed": "Đã hoàn thành",
+      "cancelled": "Đã huỷ"
+    }
+  },
   "trip": {
     "infoTrip": "Thông Tin Chuyến Đi",
     "createNewTrip": "Tạo chuyến mới",

services/time_service.tsx

@@ -41,3 +41,8 @@ export function formatRelativeTime(unixTime: number): string {
   if (diffMonths < 12) return `${diffMonths} tháng trước`;
   return `${diffYears} năm trước`;
 }
+
+export const formatTimestamp = (timestamp?: number): string => {
+  if (!timestamp) return "N/A";
+  return dayjs.unix(timestamp).format("DD/MM/YYYY HH:mm:ss");
+};

state/use-thing.ts

@@ -0,0 +1,31 @@
+import { querySearchThings } from "@/controller/DeviceController";
+import { create } from "zustand";
+
+type ThingState = {
+  things: Model.Thing[] | null;
+  getThings: (body: Model.SearchThingBody) => Promise<void>;
+  error: string | null;
+  loading?: boolean;
+};
+
+export const useThings = create<ThingState>((set) => ({
+  things: null,
+  getThings: async (body: Model.SearchThingBody) => {
+    set({ loading: true, error: null });
+    try {
+      const response = await querySearchThings(body);
+      console.log("Things fetching API: ", response.data.things?.length);
+
+      set({ things: response.data.things ?? [], loading: false });
+    } catch (error) {
+      console.error("Error when fetch things: ", error);
+      set({
+        error: "Failed to fetch things data",
+        loading: false,
+        things: null,
+      });
+    }
+  },
+  error: null,
+  loading: false,
+}));

state/use-tripslist.ts

@@ -0,0 +1,31 @@
+import { queryTripsList } from "@/controller/TripController";
+import { create } from "zustand";
+
+type TripsListState = {
+  tripsList: Model.TripsListResponse | null;
+  getTripsList: (body: Model.TripListBody) => Promise<void>;
+  error: string | null;
+  loading?: boolean;
+};
+
+export const useTripsList = create<TripsListState>((set) => ({
+  tripsList: null,
+  getTripsList: async (body: Model.TripListBody) => {
+    set({ loading: true, error: null });
+    try {
+      const response = await queryTripsList(body);
+      console.log("Trip fetching API: ", response.data.trips?.length);
+
+      set({ tripsList: response.data ?? [], loading: false });
+    } catch (error) {
+      console.error("Error when fetch things: ", error);
+      set({
+        error: "Failed to fetch things data",
+        loading: false,
+        tripsList: null,
+      });
+    }
+  },
+  error: null,
+  loading: false,
+}));