cập nhật themes cho tab

components/diary/TripCard.tsx

@@ -11,6 +11,7 @@ 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: Model.Trip;
@@ -32,6 +33,7 @@ export default function TripCard({
   onDelete,
 }: TripCardProps) {
   const { t } = useI18n();
+  const { colors } = useThemeContext();
   const { things } = useThings();
   const TRIP_STATUS_CONFIG = useTripStatusConfig();
 
@@ -54,8 +56,30 @@ export default function TripCard({
   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 (
-    <View style={styles.card}>
+    <View style={[styles.card, themedStyles.card]}>
       <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
         {/* Header */}
         <View style={styles.header}>
@@ -66,7 +90,7 @@ export default function TripCard({
               color={statusConfig.textColor}
             />
             <View style={styles.titleContainer}>
-              <Text style={styles.title}>{trip.name}</Text>
+              <Text style={[styles.title, themedStyles.title]}>{trip.name}</Text>
             </View>
           </View>
           <View
@@ -93,15 +117,15 @@ export default function TripCard({
         {/* Info Grid */}
         <View style={styles.infoGrid}>
           <View style={styles.infoRow}>
-            <Text style={styles.label}>{t("diary.tripCard.shipCode")}</Text>
-            <Text style={styles.value}>
+            <Text style={[styles.label, themedStyles.label]}>{t("diary.tripCard.shipCode")}</Text>
+            <Text style={[styles.value, themedStyles.value]}>
               {thingOfTrip?.metadata?.ship_reg_number /* hoặc trip.ship_id */}
             </Text>
           </View>
 
           <View style={styles.infoRow}>
-            <Text style={styles.label}>{t("diary.tripCard.departure")}</Text>
-            <Text style={styles.value}>
+            <Text style={[styles.label, themedStyles.label]}>{t("diary.tripCard.departure")}</Text>
+            <Text style={[styles.value, themedStyles.value]}>
               {trip.departure_time
                 ? dayjs(trip.departure_time).format("DD/MM/YYYY HH:mm")
                 : "-"}
@@ -109,9 +133,9 @@ export default function TripCard({
           </View>
 
           <View style={styles.infoRow}>
-            <Text style={styles.label}>{t("diary.tripCard.return")}</Text>
+            <Text style={[styles.label, themedStyles.label]}>{t("diary.tripCard.return")}</Text>
             {/* FIXME: trip.returnDate không có trong dữ liệu API, cần mapping từ trip.arrival_time */}
-            <Text style={styles.value}>
+            <Text style={[styles.value, themedStyles.value]}>
               {trip.arrival_time
                 ? dayjs(trip.arrival_time).format("DD/MM/YYYY HH:mm")
                 : "-"}
@@ -121,15 +145,15 @@ export default function TripCard({
       </TouchableOpacity>
 
       {/* Action Buttons */}
-      <View style={styles.divider} />
+      <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="#6B7280" />
-          <Text style={styles.actionText}>{t("diary.tripCard.view")}</Text>
+          <Ionicons name="eye-outline" size={20} color={colors.textSecondary} />
+          <Text style={[styles.actionText, themedStyles.actionText]}>{t("diary.tripCard.view")}</Text>
         </TouchableOpacity>
 
         {showEdit && (
@@ -138,8 +162,8 @@ export default function TripCard({
             onPress={onEdit}
             activeOpacity={0.7}
           >
-            <Ionicons name="create-outline" size={20} color="#6B7280" />
-            <Text style={styles.actionText}>{t("diary.tripCard.edit")}</Text>
+            <Ionicons name="create-outline" size={20} color={colors.textSecondary} />
+            <Text style={[styles.actionText, themedStyles.actionText]}>{t("diary.tripCard.edit")}</Text>
           </TouchableOpacity>
         )}
 
@@ -148,8 +172,8 @@ export default function TripCard({
           onPress={onTeam}
           activeOpacity={0.7}
         >
-          <Ionicons name="people-outline" size={20} color="#6B7280" />
-          <Text style={styles.actionText}>{t("diary.tripCard.team")}</Text>
+          <Ionicons name="people-outline" size={20} color={colors.textSecondary} />
+          <Text style={[styles.actionText, themedStyles.actionText]}>{t("diary.tripCard.team")}</Text>
         </TouchableOpacity>
 
         {showSend && (
@@ -158,8 +182,8 @@ export default function TripCard({
             onPress={onSend}
             activeOpacity={0.7}
           >
-            <Ionicons name="send-outline" size={20} color="#6B7280" />
-            <Text style={styles.actionText}>{t("diary.tripCard.send")}</Text>
+            <Ionicons name="send-outline" size={20} color={colors.textSecondary} />
+            <Text style={[styles.actionText, themedStyles.actionText]}>{t("diary.tripCard.send")}</Text>
           </TouchableOpacity>
         )}
 
@@ -169,7 +193,7 @@ export default function TripCard({
             onPress={onDelete}
             activeOpacity={0.7}
           >
-            <Ionicons name="trash-outline" size={20} color="#EF4444" />
+            <Ionicons name="trash-outline" size={20} color={colors.error} />
             <Text style={[styles.actionText, styles.deleteText]}>{t("diary.tripCard.delete")}</Text>
           </TouchableOpacity>
         )}
@@ -180,7 +204,6 @@ export default function TripCard({
 
 const styles = StyleSheet.create({
   card: {
-    backgroundColor: "#FFFFFF",
     borderRadius: 12,
     padding: 16,
     marginBottom: 12,
@@ -193,7 +216,6 @@ const styles = StyleSheet.create({
     shadowRadius: 8,
     elevation: 2,
     borderWidth: 1,
-    borderColor: "#F3F4F6",
   },
   header: {
     flexDirection: "row",
@@ -213,7 +235,6 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 16,
     fontWeight: "600",
-    color: "#111827",
     marginBottom: 2,
     fontFamily: Platform.select({
       ios: "System",
@@ -238,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",
@@ -255,9 +276,7 @@ const styles = StyleSheet.create({
   },
   value: {
     fontSize: 14,
-    color: "#111827",
     fontWeight: "500",
-    textAlign: "right",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
@@ -266,25 +285,20 @@ const styles = StyleSheet.create({
   },
   divider: {
     height: 1,
-    backgroundColor: "#F3F4F6",
-    marginTop: 16,
+    marginVertical: 12,
   },
   actionsContainer: {
     flexDirection: "row",
     justifyContent: "space-around",
-    paddingTop: 12,
+    alignItems: "center",
   },
   actionButton: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 6,
-    paddingVertical: 8,
-    paddingHorizontal: 12,
+    gap: 4,
   },
   actionText: {
     fontSize: 14,
-    color: "#6B7280",
-    fontWeight: "500",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",