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

components/alarm/AlarmCard.tsx

@@ -34,40 +34,54 @@ export const AlarmCard: React.FC<AlarmCardProps> = ({ alarm, onReload }) => {
   );
 
   // Determine level and colors based on alarm level
+  // 0: Thông tin (Xanh lá), 1: Cảnh báo (Vàng), 2: Nguy hiểm (Đỏ), 3: Khẩn cấp SOS (Tím)
   const getAlarmConfig = (level?: number) => {
-    if (level === 3) {
-      // Danger - Red
-      return {
-        level: 3,
-        icon: "warning" as const,
-        bgColor: "#fee2e2",
-        borderColor: "#DC0E0E",
-        iconColor: "#dc2626",
-        statusBg: "#dcfce7",
-        statusText: "#166534",
-      };
-    } else if (level === 2) {
-      // Caution - Yellow/Orange
-      return {
-        level: 2,
-        icon: "alert-circle" as const,
-        bgColor: "#fef3c7",
-        borderColor: "#FF6C0C",
-        iconColor: "#d97706",
-        statusBg: "#fef08a",
-        statusText: "#713f12",
-      };
-    } else {
-      // Info - Green
-      return {
-        level: 1,
-        icon: "information-circle" as const,
-        bgColor: "#fffefe",
-        borderColor: "#FF937E",
-        iconColor: "#FF937E",
-        statusBg: "#dcfce7",
-        statusText: "#166534",
-      };
+    switch (level) {
+      case 3:
+        // SOS - Khẩn cấp (Purple)
+        return {
+          level: 3,
+          icon: "alert" as const,
+          bgColor: colors.card,
+          borderColor: "#9333EA", // Purple
+          iconColor: "#9333EA",
+          statusBg: "#dcfce7",
+          statusText: "#166534",
+        };
+      case 2:
+        // Nguy hiểm - Đỏ
+        return {
+          level: 2,
+          icon: "warning" as const,
+          bgColor: colors.card,
+          borderColor: colors.error,
+          iconColor: colors.error,
+          statusBg: "#dcfce7",
+          statusText: "#166534",
+        };
+      case 1:
+        // Cảnh báo - Vàng
+        return {
+          level: 1,
+          icon: "alert-circle" as const,
+          bgColor: colors.card,
+          borderColor: colors.warning,
+          iconColor: colors.warning,
+          statusBg: "#fef08a",
+          statusText: "#713f12",
+        };
+      case 0:
+      default:
+        // Thông tin - Xanh lá
+        return {
+          level: 0,
+          icon: "information-circle" as const,
+          bgColor: colors.card,
+          borderColor: colors.success,
+          iconColor: colors.success,
+          statusBg: "#dcfce7",
+          statusText: "#166534",
+        };
     }
   };
 
@@ -217,14 +231,16 @@ export const AlarmCard: React.FC<AlarmCardProps> = ({ alarm, onReload }) => {
                 style={[
                   styles.statusBadge,
                   {
-                    backgroundColor: alarm.confirmed ? "#8FD14F" : "#EEEEEE",
+                    backgroundColor: alarm.confirmed
+                      ? "#8FD14F"
+                      : colors.surfaceSecondary,
                   },
                 ]}
               >
                 <Text
                   style={[
                     styles.statusText,
-                    { color: alarm.confirmed ? "#166534" : "black" },
+                    { color: alarm.confirmed ? "#166534" : colors.text },
                   ]}
                 >
                   {alarm.confirmed ? "Đã xác nhận" : "Chờ xác nhận"}
@@ -262,7 +278,10 @@ export const AlarmCard: React.FC<AlarmCardProps> = ({ alarm, onReload }) => {
               Nhập ghi chú xác nhận
             </Text>
             <TextInput
-              style={[styles.input, { color: colors.text }]}
+              style={[
+                styles.input,
+                { color: colors.text, borderColor: colors.border },
+              ]}
               placeholder="Nhập ghi chú"
               placeholderTextColor={colors.textSecondary}
               multiline
@@ -272,14 +291,20 @@ export const AlarmCard: React.FC<AlarmCardProps> = ({ alarm, onReload }) => {
             />
             <View style={styles.modalActions}>
               <TouchableOpacity
-                style={[styles.modalButton, styles.cancelButton]}
+                style={[
+                  styles.modalButton,
+                  styles.cancelButton,
+                  { backgroundColor: colors.surfaceSecondary },
+                ]}
                 onPress={() => {
                   setShowModal(false);
                   setNote("");
                 }}
                 disabled={submitting}
               >
-                <Text style={styles.cancelText}>Hủy</Text>
+                <Text style={[styles.cancelText, { color: colors.text }]}>
+                  Hủy
+                </Text>
               </TouchableOpacity>
               <TouchableOpacity
                 style={[