update tab diary

components/diary/TripCard.tsx

@@ -0,0 +1,181 @@
+import React from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Platform,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { Trip, TRIP_STATUS_CONFIG } from "./types";
+
+interface TripCardProps {
+  trip: Trip;
+  onPress?: () => void;
+}
+
+export default function TripCard({ trip, onPress }: TripCardProps) {
+  const statusConfig = TRIP_STATUS_CONFIG[trip.status];
+
+  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>
+        </View>
+        <View
+          style={[
+            styles.badge,
+            {
+              backgroundColor: statusConfig.bgColor,
+            },
+          ]}
+        >
+          <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>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: "#FFFFFF",
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 12,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.05,
+    shadowRadius: 8,
+    elevation: 2,
+    borderWidth: 1,
+    borderColor: "#F3F4F6",
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    marginBottom: 16,
+  },
+  headerLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+  },
+  titleContainer: {
+    marginLeft: 12,
+    flex: 1,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#111827",
+    marginBottom: 2,
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
+  },
+  code: {
+    fontSize: 14,
+    color: "#6B7280",
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
+  },
+  badge: {
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 12,
+  },
+  badgeText: {
+    fontSize: 12,
+    fontWeight: "500",
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
+  },
+  infoGrid: {
+    gap: 12,
+  },
+  infoRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  label: {
+    fontSize: 14,
+    color: "#6B7280",
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
+  },
+  value: {
+    fontSize: 14,
+    color: "#111827",
+    fontWeight: "500",
+    textAlign: "right",
+    fontFamily: Platform.select({
+      ios: "System",
+      android: "Roboto",
+      default: "System",
+    }),
+  },
+  duration: {
+    color: "#3B82F6",
+  },
+});