update interface, diary

2025-12-04 15:54:49 +07:00
parent 4d60ce279e
commit 0672f8adf9
10 changed files with 291 additions and 90 deletions
--- a/components/diary/StatusDropdown.tsx
+++ b/components/diary/StatusDropdown.tsx
@@ -18,9 +18,11 @@ interface StatusDropdownProps {

 const STATUS_OPTIONS: Array<{ value: TripStatus | null; label: string }> = [
  { value: null, label: "Vui lòng chọn" },
-  { value: "completed", label: "Hoàn thành" },
+  { value: "created", label: "Đã khởi tạo" },
+  { value: "pending", label: "Chờ duyệt" },
+  { value: "approved", label: "Đã duyệt" },
  { value: "in-progress", label: "Đang hoạt động" },
-  { value: "quality-check", label: "Đã khởi tạo" },
+  { value: "completed", label: "Hoàn thành" },
  { value: "cancelled", label: "Đã hủy" },
 ];

@@ -162,7 +164,6 @@ const styles = StyleSheet.create({
    paddingVertical: 16,
    borderBottomWidth: 1,
    borderBottomColor: "#F3F4F6",
-    
  },
  selectedOption: {
    backgroundColor: "#EFF6FF",
--- a/components/diary/TripCard.tsx
+++ b/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",
+  },
 });
--- a/components/diary/mockData.ts
+++ b/components/diary/mockData.ts
@@ -54,7 +54,7 @@ export const MOCK_TRIPS: Trip[] = [
    departureDate: "2025-11-18 07:00",
    returnDate: "2025-11-23 14:00",
    duration: "5 ngày 7 giờ",
-    status: "quality-check",
+    status: "created",
  },
  {
    id: "T006",
@@ -67,4 +67,26 @@ export const MOCK_TRIPS: Trip[] = [
    duration: "6 giờ",
    status: "in-progress",
  },
+  {
+    id: "T007",
+    title: "Khảo sát vùng biển",
+    code: "T007",
+    vessel: "Ngọc Lan",
+    vesselCode: "V002",
+    departureDate: "2025-12-01 07:00",
+    returnDate: null,
+    duration: "-",
+    status: "pending",
+  },
+  {
+    id: "T008",
+    title: "Đánh cá xa bờ",
+    code: "T008",
+    vessel: "Việt Thắng",
+    vesselCode: "V003",
+    departureDate: "2025-12-05 05:00",
+    returnDate: null,
+    duration: "-",
+    status: "approved",
+  },
 ];
--- a/components/diary/types.ts
+++ b/components/diary/types.ts
@@ -1,8 +1,10 @@
 export type TripStatus =
-  | "completed"
-  | "in-progress"
-  | "cancelled"
-  | "quality-check";
+  | "created" // Đã khởi tạo
+  | "pending" // Chờ duyệt
+  | "approved" // Đã duyệt
+  | "in-progress" // Đang hoạt động
+  | "completed" // Hoàn thành
+  | "cancelled"; // Đã hủy

 export interface Trip {
  id: string;
@@ -17,28 +19,40 @@ export interface Trip {
 }

 export const TRIP_STATUS_CONFIG = {
-  completed: {
-    label: "Hoàn thành",
-    bgColor: "#D1FAE5",
-    textColor: "#065F46",
-    icon: "checkmark-circle",
+  created: {
+    label: "Đã khởi tạo",
+    bgColor: "#F3F4F6", // Gray background
+    textColor: "#4B5563", // Gray text
+    icon: "document-text",
+  },
+  pending: {
+    label: "Chờ duyệt",
+    bgColor: "#FEF3C7", // Yellow background
+    textColor: "#92400E", // Dark yellow text
+    icon: "hourglass",
+  },
+  approved: {
+    label: "Đã duyệt",
+    bgColor: "#E0E7FF", // Indigo background
+    textColor: "#3730A3", // Dark indigo text
+    icon: "checkmark-done",
  },
  "in-progress": {
-    label: "Đang diễn ra",
-    bgColor: "#DBEAFE",
-    textColor: "#1E40AF",
-    icon: "time",
+    label: "Đang hoạt động",
+    bgColor: "#DBEAFE", // Blue background
+    textColor: "#1E40AF", // Dark blue text
+    icon: "sync",
+  },
+  completed: {
+    label: "Hoàn thành",
+    bgColor: "#D1FAE5", // Green background
+    textColor: "#065F46", // Dark green text
+    icon: "checkmark-circle",
  },
  cancelled: {
    label: "Đã hủy",
-    bgColor: "#FEE2E2",
-    textColor: "#991B1B",
+    bgColor: "#FEE2E2", // Red background
+    textColor: "#991B1B", // Dark red text
    icon: "close-circle",
  },
-  "quality-check": {
-    label: "Khảo sát địa chất",
-    bgColor: "#D1FAE5",
-    textColor: "#065F46",
-    icon: "checkmark-circle",
-  },
 } as const;