cập nhật animation hiển thị modal, call API edit

app/(tabs)/diary.tsx

@@ -13,7 +13,7 @@ import { Ionicons } from "@expo/vector-icons";
 import FilterButton from "@/components/diary/FilterButton";
 import TripCard from "@/components/diary/TripCard";
 import FilterModal, { FilterValues } from "@/components/diary/FilterModal";
-import AddTripModal from "@/components/diary/addTripModal";
+import AddTripModal from "@/components/diary/TripFormModal";
 import { useThings } from "@/state/use-thing";
 import { useTripsList } from "@/state/use-tripslist";
 import dayjs from "dayjs";
@@ -25,6 +25,8 @@ export default function diary() {
   const { colors } = useThemeContext();
   const [showFilterModal, setShowFilterModal] = useState(false);
   const [showAddTripModal, setShowAddTripModal] = useState(false);
+  const [editingTrip, setEditingTrip] = useState<Model.Trip | null>(null);
+  const [viewingTrip, setViewingTrip] = useState<Model.Trip | null>(null);
   const [filters, setFilters] = useState<FilterValues>({
     status: null,
     startDate: null,
@@ -169,19 +171,27 @@ export default function diary() {
     getTripsList(updatedPayload);
   }, [isLoadingMore, hasMore, payloadTrips]);
 
-  const handleTripPress = (tripId: string) => {
-    // TODO: Navigate to trip detail
-    console.log("Trip pressed:", tripId);
-  };
+  // const handleTripPress = (tripId: string) => {
+  //   // TODO: Navigate to trip detail
+  //   console.log("Trip pressed:", tripId);
+  // };
 
   const handleViewTrip = (tripId: string) => {
-    console.log("View trip:", tripId);
-    // TODO: Navigate to trip detail view
+    // Find the trip from allTrips and open modal in view mode
+    const tripToView = allTrips.find((trip) => trip.id === tripId);
+    if (tripToView) {
+      setViewingTrip(tripToView);
+      setShowAddTripModal(true);
+    }
   };
 
   const handleEditTrip = (tripId: string) => {
-    console.log("Edit trip:", tripId);
-    // TODO: Navigate to trip edit screen
+    // Find the trip from allTrips
+    const tripToEdit = allTrips.find((trip) => trip.id === tripId);
+    if (tripToEdit) {
+      setEditingTrip(tripToEdit);
+      setShowAddTripModal(true);
+    }
   };
 
   const handleViewTeam = (tripId: string) => {
@@ -242,7 +252,7 @@ export default function diary() {
     ({ item }: { item: any }) => (
       <TripCard
         trip={item}
-        onPress={() => handleTripPress(item.id)}
+        // onPress={() => handleTripPress(item.id)}
         onView={() => handleViewTrip(item.id)}
         onEdit={() => handleEditTrip(item.id)}
         onTeam={() => handleViewTeam(item.id)}
@@ -250,7 +260,7 @@ export default function diary() {
         onDelete={() => handleDeleteTrip(item.id)}
       />
     ),
-    []
+    [handleViewTrip, handleEditTrip, handleViewTeam, handleSendTrip, handleDeleteTrip]
   );
 
   // Key extractor cho FlatList
@@ -348,11 +358,17 @@ export default function diary() {
         onApply={handleApplyFilters}
       />
 
-      {/* Add Trip Modal */}
+      {/* Add/Edit/View Trip Modal */}
       <AddTripModal
         visible={showAddTripModal}
-        onClose={() => setShowAddTripModal(false)}
+        onClose={() => {
+          setShowAddTripModal(false);
+          setEditingTrip(null);
+          setViewingTrip(null);
+        }}
         onSuccess={handleTripAddSuccess}
+        mode={viewingTrip ? 'view' : editingTrip ? 'edit' : 'add'}
+        tripData={viewingTrip || editingTrip || undefined}
       />
     </SafeAreaView>
   );