cập nhật themes cho tab

components/diary/FilterModal.tsx

@@ -14,6 +14,7 @@ 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() {
@@ -63,6 +64,7 @@ export default function FilterModal({
   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);
@@ -87,6 +89,42 @@ export default function FilterModal({
     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
       visible={visible}
@@ -100,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}>{t("diary.filter")}</Text>
+            <Text style={[styles.title, themedStyles.title]}>{t("diary.filter")}</Text>
             <View style={styles.placeholder} />
           </View>
 
@@ -129,32 +167,32 @@ export default function FilterModal({
 
             {/* Filter Results Preview */}
             {hasFilters && (
-              <View style={styles.previewContainer}>
-                <Text style={styles.previewTitle}>{t("diary.selectedFilters")}</Text>
+              <View style={[styles.previewContainer, themedStyles.previewContainer]}>
+                <Text style={[styles.previewTitle, themedStyles.previewTitle]}>{t("diary.selectedFilters")}</Text>
                 {status !== null && (
-                  <View style={styles.filterTag}>
-                    <Text style={styles.filterTagText}>
+                  <View style={[styles.filterTag, themedStyles.filterTag]}>
+                    <Text style={[styles.filterTagText, themedStyles.filterTagText]}>
                       {t("diary.statusLabel")} {mapStatusNumberToString(status)}
                     </Text>
                   </View>
                 )}
                 {startDate && (
-                  <View style={styles.filterTag}>
-                    <Text style={styles.filterTagText}>
+                  <View style={[styles.filterTag, themedStyles.filterTag]}>
+                    <Text style={[styles.filterTagText, themedStyles.filterTagText]}>
                       {t("diary.fromLabel")} {startDate.toLocaleDateString("vi-VN")}
                     </Text>
                   </View>
                 )}
                 {endDate && (
-                  <View style={styles.filterTag}>
-                    <Text style={styles.filterTagText}>
+                  <View style={[styles.filterTag, themedStyles.filterTag]}>
+                    <Text style={[styles.filterTagText, themedStyles.filterTagText]}>
                       {t("diary.toLabel")} {endDate.toLocaleDateString("vi-VN")}
                     </Text>
                   </View>
                 )}
                 {selectedShip && (
-                  <View style={styles.filterTag}>
-                    <Text style={styles.filterTagText}>
+                  <View style={[styles.filterTag, themedStyles.filterTag]}>
+                    <Text style={[styles.filterTagText, themedStyles.filterTagText]}>
                       {t("diary.shipLabel")} {selectedShip.shipName}
                     </Text>
                   </View>
@@ -164,16 +202,16 @@ 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("diary.reset")}</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}
             >
@@ -186,6 +224,7 @@ export default function FilterModal({
   );
 }
 
+
 const styles = StyleSheet.create({
   overlay: {
     flex: 1,
@@ -193,7 +232,6 @@ const styles = StyleSheet.create({
     justifyContent: "flex-end",
   },
   modalContainer: {
-    backgroundColor: "#FFFFFF",
     borderTopLeftRadius: 24,
     borderTopRightRadius: 24,
     maxHeight: "80%",
@@ -213,7 +251,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
     paddingVertical: 16,
     borderBottomWidth: 1,
-    borderBottomColor: "#F3F4F6",
   },
   closeButton: {
     padding: 4,
@@ -221,7 +258,6 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "700",
-    color: "#111827",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
@@ -237,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",
@@ -252,7 +286,6 @@ const styles = StyleSheet.create({
     }),
   },
   filterTag: {
-    backgroundColor: "#EFF6FF",
     paddingHorizontal: 12,
     paddingVertical: 6,
     borderRadius: 16,
@@ -261,7 +294,6 @@ const styles = StyleSheet.create({
   },
   filterTagText: {
     fontSize: 14,
-    color: "#3B82F6",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
@@ -273,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",
@@ -285,7 +315,6 @@ const styles = StyleSheet.create({
   resetButtonText: {
     fontSize: 16,
     fontWeight: "600",
-    color: "#6B7280",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
@@ -294,7 +323,6 @@ const styles = StyleSheet.create({
   },
   applyButton: {
     flex: 1,
-    backgroundColor: "#3B82F6",
     paddingVertical: 14,
     borderRadius: 12,
     alignItems: "center",