update icon, info trip

app/(tabs)/tripInfo.tsx

@@ -1,22 +1,22 @@
 import { ThemedText } from "@/components/themed-text";
-import { ThemedView } from "@/components/themed-view";
 import TripCostTable from "@/components/tripInfo/TripCostTable";
-import { StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 export default function TripInfoScreen() {
   return (
-    <ThemedView style={styles.container}>
+    <SafeAreaView>
+      <View style={styles.container}>
         <ThemedText type="title">Thông Tin Chuyến Đi</ThemedText>
         <TripCostTable />
-    </ThemedView>
+      </View>
+    </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
     alignItems: "center",
-    justifyContent: "center",
     padding: 20,
   },
 });

components/tripInfo/TripCostTable.tsx

@@ -1,6 +1,16 @@
-import React from "react";
+import { IconSymbol } from "@/components/ui/icon-symbol";
-import { FlatList, ListRenderItem, Text, View } from "react-native";
+import React, { useRef, useState } from "react";
-import styles from "./TripCostTable.styles";
+import {
+  Animated,
+  FlatList,
+  ListRenderItem,
+  Platform,
+  Text,
+  TouchableOpacity,
+  UIManager,
+  View,
+} from "react-native";
+import styles from "./style/TripCostTable.styles";
 
 // ---------------------------
 // 🧩 Interface
@@ -55,7 +65,18 @@ const data: CostItem[] = [
 // ---------------------------
 // 💰 Component chính
 // ---------------------------
+
 const TripCostTable: React.FC = () => {
+  // Enable LayoutAnimation for Android
+  if (
+    Platform.OS === "android" &&
+    UIManager.setLayoutAnimationEnabledExperimental
+  ) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+  }
+
+  const [collapsed, setCollapsed] = useState(true);
+  const animatedHeight = useRef(new Animated.Value(0)).current;
   const tongCong = data.reduce((sum, item) => sum + item.tongChiPhi, 0);
 
   const renderItem: ListRenderItem<CostItem> = ({ item }) => (
@@ -67,13 +88,60 @@ const TripCostTable: React.FC = () => {
     </View>
   );
 
+  const contentHeight = 220; // Chiều cao cố định cho bảng, có thể điều chỉnh
+  const handleToggle = () => {
+    if (collapsed) {
+      Animated.timing(animatedHeight, {
+        toValue: contentHeight,
+        duration: 350,
+        useNativeDriver: false,
+      }).start();
+    } else {
+      Animated.timing(animatedHeight, {
+        toValue: 0,
+        duration: 350,
+        useNativeDriver: false,
+      }).start();
+    }
+    setCollapsed((prev) => !prev);
+  };
+
   return (
     <View style={styles.container}>
+      <TouchableOpacity
+        activeOpacity={0.7}
+        onPress={handleToggle}
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: collapsed ? 0 : 12,
+        }}
+      >
         <Text style={styles.title}>Chi phí chuyến đi</Text>
+        {collapsed && (
+          <Text
+            style={[
+              styles.title,
+              { color: "#ff6600", fontWeight: "bold", marginLeft: 8 },
+            ]}
+          >
+            {tongCong.toLocaleString()}
+          </Text>
+        )}
+        <IconSymbol
+          name={collapsed ? "arrowshape.down.fill" : "arrowshape.up.fill"}
+          size={15}
+          color="#000000"
+        />
+      </TouchableOpacity>
 
+      <Animated.View style={{ height: animatedHeight, overflow: "hidden" }}>
         {/* Header */}
         <View style={[styles.row, styles.header]}>
-        <Text style={[styles.cell, styles.left, styles.headerText]}>Loại</Text>
+          <Text style={[styles.cell, styles.left, styles.headerText]}>
+            Loại
+          </Text>
           <Text style={[styles.cell, styles.headerText]}>Tổng chi phí</Text>
         </View>
 
@@ -85,7 +153,7 @@ const TripCostTable: React.FC = () => {
         />
 
         {/* Footer */}
-      <View style={[styles.row, styles.footer]}>
+        <View style={[styles.row]}>
           <Text style={[styles.cell, styles.left, styles.footerText]}>
             Tổng cộng
           </Text>
@@ -93,6 +161,7 @@ const TripCostTable: React.FC = () => {
             {tongCong.toLocaleString()}
           </Text>
         </View>
+      </Animated.View>
     </View>
   );
 };

components/tripInfo/style/TripCostTable.styles.ts

@@ -12,11 +12,14 @@ const styles = StyleSheet.create({
     shadowRadius: 4,
     elevation: 2,
   },
+  icon: {
+    fontSize: 10,
+  },
   title: {
     fontSize: 18,
     fontWeight: "700",
     textAlign: "center",
-    marginBottom: 12,
+    // marginBottom: 12,
   },
   row: {
     flexDirection: "row",
@@ -52,7 +55,7 @@ const styles = StyleSheet.create({
     color: "#007bff",
   },
   total: {
-    color: "#007bff",
+    color: "#ff6600",
     fontWeight: "700",
   },
 });

components/ui/icon-symbol.tsx

@@ -23,6 +23,8 @@ const MAPPING = {
   "chevron.right": "chevron-right",
   "ferry.fill": "directions-boat",
   "map.fill": "map",
+  "arrowshape.down.fill": "arrow-drop-down",
+  "arrowshape.up.fill": "arrow-drop-up",
 } as IconMapping;
 
 /**

config/axios.ts

@@ -53,7 +53,6 @@ api.interceptors.response.use(
     return response;
   },
   (error) => {
-
     if (!error.response) {
       const networkErrorMsg =
         error.message || "Network error - please check connection";