update login, modal detail in tripInfo

components/tripInfo/TripCostTable.tsx

@@ -1,6 +1,7 @@
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import React, { useRef, useState } from "react";
 import { Animated, Text, TouchableOpacity, View } from "react-native";
+import TripCostDetailModal from "./modal/TripCostDetailModal";
 import styles from "./style/TripCostTable.styles";
 
 // ---------------------------
@@ -60,6 +61,7 @@ const data: CostItem[] = [
 const TripCostTable: React.FC = () => {
   const [collapsed, setCollapsed] = useState(true);
   const [contentHeight, setContentHeight] = useState<number>(0);
+  const [modalVisible, setModalVisible] = useState(false);
   const animatedHeight = useRef(new Animated.Value(0)).current;
   const tongCong = data.reduce((sum, item) => sum + item.tongChiPhi, 0);
 
@@ -74,7 +76,11 @@ const TripCostTable: React.FC = () => {
   };
 
   const handleViewDetail = () => {
-    console.log("View trip cost details");
+    setModalVisible(true);
+  };
+
+  const handleCloseModal = () => {
+    setModalVisible(false);
   };
 
   return (
@@ -191,6 +197,13 @@ const TripCostTable: React.FC = () => {
           <Text style={styles.viewDetailText}>Xem chi tiết</Text>
         </TouchableOpacity>
       </Animated.View>
+
+      {/* Modal */}
+      <TripCostDetailModal
+        visible={modalVisible}
+        onClose={handleCloseModal}
+        data={data}
+      />
     </View>
   );
 };