Cập nhật theme cho cảnh báo, giám sát

app/(tabs)/index.tsx

@@ -10,6 +10,7 @@ import ShipSearchForm, {
 import { ThemedText } from "@/components/themed-text";
 import { EVENT_SEARCH_THINGS, IOS_PLATFORM, LIGHT_THEME } from "@/constants";
 import { queryBanzoneById } from "@/controller/MapController";
+import { useAppTheme } from "@/hooks/use-app-theme";
 import { usePlatform } from "@/hooks/use-platform";
 import { useThemeContext } from "@/hooks/use-theme-context";
 import { searchThingEventBus } from "@/services/device_events";
@@ -69,6 +70,7 @@ export default function HomeScreen() {
   const [things, setThings] = useState<Model.ThingsResponse | null>(null);
   const platform = usePlatform();
   const theme = useThemeContext().colorScheme;
+  const { colors } = useAppTheme();
   const scale = useRef(new Animated.Value(0)).current;
   const opacity = useRef(new Animated.Value(1)).current;
   const [shipSearchFormData, setShipSearchFormData] = useState<
@@ -85,7 +87,7 @@ export default function HomeScreen() {
 
   // Alarm list animation
   const screenHeight = Dimensions.get("window").height;
-  const alarmListHeight = Math.round(screenHeight * 0.3);
+  const alarmListHeight = Math.round(screenHeight * 0.4);
   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
@@ -693,6 +695,7 @@ export default function HomeScreen() {
                         fontSize: 20,
                         textAlign: "center",
                         fontWeight: "600",
+                        color: colors.text,
                       }}
                     >
                       Danh sách tàu thuyền
@@ -735,7 +738,7 @@ export default function HomeScreen() {
                                 style={{
                                   width: "50%",
                                   height: 1,
-                                  backgroundColor: "#E5E7EB",
+                                  backgroundColor: colors.separator,
                                   marginVertical: 8,
                                   borderRadius: 1,
                                 }}
@@ -766,22 +769,36 @@ export default function HomeScreen() {
               zIndex: 10,
             }}
           >
-            <View className="bg-white rounded-t-3xl shadow-md overflow-hidden h-full z-50">
+            <View
+              style={{
+                backgroundColor: colors.surface,
+                borderTopLeftRadius: 24,
+                borderTopRightRadius: 24,
+                overflow: "hidden",
+                height: "100%",
+              }}
+            >
               <View className="flex-row items-center justify-between px-4 py-2">
-                <Text className="text-lg font-semibold">
+                <Text
+                  style={{
+                    fontSize: 18,
+                    fontWeight: "600",
+                    color: colors.text,
+                  }}
+                >
                   Danh sách cảnh báo
                 </Text>
                 <TouchableOpacity
                   onPress={() => closeAlarmList()}
                   style={{ padding: 6 }}
                 >
-                  <Ionicons name="close" size={20} color="#374151" />
+                  <Ionicons name="close" size={20} color={colors.icon} />
                 </TouchableOpacity>
               </View>
               <View
                 style={{
                   flex: 1,
-                  backgroundColor: "#F9FAFB",
+                  backgroundColor: colors.backgroundSecondary,
                   zIndex: 50,
                 }}
               >

app/(tabs)/warning.tsx

@@ -84,7 +84,12 @@ const WarningScreen = () => {
       });
       const slice = resp.data?.alarms ?? [];
 
-      setAlarms((prev) => (append ? [...prev, ...slice] : slice));
+      // Sort alarms by level descending (higher level first: SOS > Danger > Warning > Info)
+      const sortedSlice = [...slice].sort(
+        (a, b) => (b.level ?? 0) - (a.level ?? 0)
+      );
+
+      setAlarms((prev) => (append ? [...prev, ...sortedSlice] : sortedSlice));
       setOffset(nextOffset);
       setHasMore(nextOffset + PAGE_SIZE < resp.data?.total!);
     } catch (error) {