update interface, diary

components/diary/TripCard.tsx

@@ -12,72 +12,119 @@ import { Trip, TRIP_STATUS_CONFIG } from "./types";
 interface TripCardProps {
   trip: Trip;
   onPress?: () => void;
+  onView?: () => void;
+  onEdit?: () => void;
+  onTeam?: () => void;
+  onSend?: () => void;
+  onDelete?: () => void;
 }
 
-export default function TripCard({ trip, onPress }: TripCardProps) {
+export default function TripCard({ trip, onPress, onView, onEdit, onTeam, onSend, onDelete }: TripCardProps) {
   const statusConfig = TRIP_STATUS_CONFIG[trip.status];
 
+  // Determine which actions to show based on status
+  const showEdit = trip.status === 'created' || trip.status === 'pending';
+  const showSend = trip.status === 'created';
+  const showDelete = trip.status === 'pending';
+
   return (
-    <TouchableOpacity style={styles.card} onPress={onPress} activeOpacity={0.7}>
-      {/* Header */}
-      <View style={styles.header}>
-        <View style={styles.headerLeft}>
-          <Ionicons
-            name={statusConfig.icon as any}
-            size={24}
-            color={statusConfig.textColor}
-          />
-          <View style={styles.titleContainer}>
-            <Text style={styles.title}>{trip.title}</Text>
-            <Text style={styles.code}>{trip.code}</Text>
+    <View style={styles.card}>
+      <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
+        {/* Header */}
+        <View style={styles.header}>
+          <View style={styles.headerLeft}>
+            <Ionicons
+              name={statusConfig.icon as any}
+              size={24}
+              color={statusConfig.textColor}
+            />
+            <View style={styles.titleContainer}>
+              <Text style={styles.title}>{trip.title}</Text>
+              <Text style={styles.code}>{trip.code}</Text>
+            </View>
           </View>
-        </View>
-        <View
-          style={[
-            styles.badge,
-            {
-              backgroundColor: statusConfig.bgColor,
-            },
-          ]}
-        >
-          <Text
+          <View
             style={[
-              styles.badgeText,
+              styles.badge,
               {
-                color: statusConfig.textColor,
+                backgroundColor: statusConfig.bgColor,
               },
             ]}
           >
-            {statusConfig.label}
-          </Text>
+            <Text
+              style={[
+                styles.badgeText,
+                {
+                  color: statusConfig.textColor,
+                },
+              ]}
+            >
+              {statusConfig.label}
+            </Text>
+          </View>
         </View>
+
+        {/* Info Grid */}
+        <View style={styles.infoGrid}>
+          <View style={styles.infoRow}>
+            <Text style={styles.label}>Tàu</Text>
+            <Text style={styles.value}>
+              {trip.vessel} ({trip.vesselCode})
+            </Text>
+          </View>
+
+          <View style={styles.infoRow}>
+            <Text style={styles.label}>Khởi hành</Text>
+            <Text style={styles.value}>{trip.departureDate}</Text>
+          </View>
+
+          <View style={styles.infoRow}>
+            <Text style={styles.label}>Trở về</Text>
+            <Text style={styles.value}>{trip.returnDate || "-"}</Text>
+          </View>
+
+          <View style={styles.infoRow}>
+            <Text style={styles.label}>Thời gian</Text>
+            <Text style={[styles.value, styles.duration]}>{trip.duration}</Text>
+          </View>
+        </View>
+      </TouchableOpacity>
+
+      {/* Action Buttons */}
+      <View style={styles.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}>View</Text>
+        </TouchableOpacity>
+
+        {showEdit && (
+          <TouchableOpacity style={styles.actionButton} onPress={onEdit} activeOpacity={0.7}>
+            <Ionicons name="create-outline" size={20} color="#6B7280" />
+            <Text style={styles.actionText}>Edit</Text>
+          </TouchableOpacity>
+        )}
+
+        <TouchableOpacity style={styles.actionButton} onPress={onTeam} activeOpacity={0.7}>
+          <Ionicons name="people-outline" size={20} color="#6B7280" />
+          <Text style={styles.actionText}>Team</Text>
+        </TouchableOpacity>
+
+        {showSend && (
+          <TouchableOpacity style={styles.actionButton} onPress={onSend} activeOpacity={0.7}>
+            <Ionicons name="send-outline" size={20} color="#6B7280" />
+            <Text style={styles.actionText}>Send</Text>
+          </TouchableOpacity>
+        )}
+
+        {showDelete && (
+          <TouchableOpacity style={styles.actionButton} onPress={onDelete} activeOpacity={0.7}>
+            <Ionicons name="trash-outline" size={20} color="#EF4444" />
+            <Text style={[styles.actionText, styles.deleteText]}>Delete</Text>
+          </TouchableOpacity>
+        )}
       </View>
-
-      {/* Info Grid */}
-      <View style={styles.infoGrid}>
-        <View style={styles.infoRow}>
-          <Text style={styles.label}>Tàu</Text>
-          <Text style={styles.value}>
-            {trip.vessel} ({trip.vesselCode})
-          </Text>
-        </View>
-
-        <View style={styles.infoRow}>
-          <Text style={styles.label}>Khởi hành</Text>
-          <Text style={styles.value}>{trip.departureDate}</Text>
-        </View>
-
-        <View style={styles.infoRow}>
-          <Text style={styles.label}>Trở về</Text>
-          <Text style={styles.value}>{trip.returnDate || "-"}</Text>
-        </View>
-
-        <View style={styles.infoRow}>
-          <Text style={styles.label}>Thời gian</Text>
-          <Text style={[styles.value, styles.duration]}>{trip.duration}</Text>
-        </View>
-      </View>
-    </TouchableOpacity>
+    </View>
   );
 }
 
@@ -178,4 +225,34 @@ const styles = StyleSheet.create({
   duration: {
     color: "#3B82F6",
   },
+  divider: {
+    height: 1,
+    backgroundColor: "#F3F4F6",
+    marginTop: 16,
+  },
+  actionsContainer: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+    paddingTop: 12,
+  },
+  actionButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+  },
+  actionText: {
+    fontSize: 14,
+    color: "#6B7280",
+    fontWeight: "500",
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
+  },
+  deleteText: {
+    color: "#EF4444",
+  },
 });