update icon, info trip

components/tripInfo/TripCostTable.tsx

@@ -1,6 +1,16 @@
-import React from "react";
-import { FlatList, ListRenderItem, Text, View } from "react-native";
-import styles from "./TripCostTable.styles";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import React, { useRef, useState } from "react";
+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,32 +88,80 @@ 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}>
-      <Text style={styles.title}>Chi phí chuyến đi</Text>
+      <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>
 
-      {/* Header */}
-      <View style={[styles.row, styles.header]}>
-        <Text style={[styles.cell, styles.left, styles.headerText]}>Loại</Text>
-        <Text style={[styles.cell, styles.headerText]}>Tổng chi phí</Text>
-      </View>
+      <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.headerText]}>Tổng chi phí</Text>
+        </View>
 
-      {/* Body */}
-      <FlatList
-        data={data}
-        renderItem={renderItem}
-        keyExtractor={(item) => item.id}
-      />
+        {/* Body */}
+        <FlatList
+          data={data}
+          renderItem={renderItem}
+          keyExtractor={(item) => item.id}
+        />
 
-      {/* Footer */}
-      <View style={[styles.row, styles.footer]}>
-        <Text style={[styles.cell, styles.left, styles.footerText]}>
-          Tổng cộng
-        </Text>
-        <Text style={[styles.cell, styles.total]}>
-          {tongCong.toLocaleString()}
-        </Text>
-      </View>
+        {/* Footer */}
+        <View style={[styles.row]}>
+          <Text style={[styles.cell, styles.left, styles.footerText]}>
+            Tổng cộng
+          </Text>
+          <Text style={[styles.cell, styles.total]}>
+            {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;
 
 /**