update tab nhật ký (Lọc, Ngôn ngữ,...)

components/diary/types.ts

@@ -1,58 +1,93 @@
+import { useI18n } from "@/hooks/use-i18n";
+
 export type TripStatus =
-  | "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;
-  title: string;
-  code: string;
-  vessel: string;
-  vesselCode: string;
-  departureDate: string;
-  returnDate: string | null;
-  duration: string;
-  status: TripStatus;
-}
+  | 0 // Đã khởi tạo
+  | 1 // Chờ duyệt
+  | 2 // Đã duyệt
+  | 3 // Đang hoạt động
+  | 4 // Hoàn thành
+  | 5; // Đã hủy
 
+// Static config - dùng khi không cần i18n hoặc ngoài React component
 export const TRIP_STATUS_CONFIG = {
-  created: {
+  0: {
     label: "Đã khởi tạo",
     bgColor: "#F3F4F6", // Gray background
     textColor: "#4B5563", // Gray text
     icon: "document-text",
   },
-  pending: {
+  1: {
     label: "Chờ duyệt",
     bgColor: "#FEF3C7", // Yellow background
     textColor: "#92400E", // Dark yellow text
     icon: "hourglass",
   },
-  approved: {
+  2: {
     label: "Đã duyệt",
     bgColor: "#E0E7FF", // Indigo background
     textColor: "#3730A3", // Dark indigo text
     icon: "checkmark-done",
   },
-  "in-progress": {
+  3: {
     label: "Đang hoạt động",
     bgColor: "#DBEAFE", // Blue background
     textColor: "#1E40AF", // Dark blue text
     icon: "sync",
   },
-  completed: {
+  4: {
     label: "Hoàn thành",
     bgColor: "#D1FAE5", // Green background
     textColor: "#065F46", // Dark green text
     icon: "checkmark-circle",
   },
-  cancelled: {
+  5: {
     label: "Đã hủy",
     bgColor: "#FEE2E2", // Red background
     textColor: "#991B1B", // Dark red text
     icon: "close-circle",
   },
 } as const;
+
+// Hook để lấy config với i18n - dùng trong React component
+export function useTripStatusConfig() {
+  const { t } = useI18n();
+
+  return {
+    0: {
+      label: t("diary.statusDropdown.created"),
+      bgColor: "#F3F4F6",
+      textColor: "#4B5563",
+      icon: "document-text",
+    },
+    1: {
+      label: t("diary.statusDropdown.pending"),
+      bgColor: "#FEF3C7",
+      textColor: "#92400E",
+      icon: "hourglass",
+    },
+    2: {
+      label: t("diary.statusDropdown.approved"),
+      bgColor: "#E0E7FF",
+      textColor: "#3730A3",
+      icon: "checkmark-done",
+    },
+    3: {
+      label: t("diary.statusDropdown.active"),
+      bgColor: "#DBEAFE",
+      textColor: "#1E40AF",
+      icon: "sync",
+    },
+    4: {
+      label: t("diary.statusDropdown.completed"),
+      bgColor: "#D1FAE5",
+      textColor: "#065F46",
+      icon: "checkmark-circle",
+    },
+    5: {
+      label: t("diary.statusDropdown.cancelled"),
+      bgColor: "#FEE2E2",
+      textColor: "#991B1B",
+      icon: "close-circle",
+    },
+  } as const;
+}