feat(localization): Add en/vi language

src/pages/Trip/components/HaulTable.tsx

@@ -11,7 +11,7 @@ export interface HaulTableProps {
   trip?: API.Trip;
   onReload?: (isTrue: boolean) => void;
 }
-const HaulTable: React.FC<HaulTableProps> = ({ hauls, trip, onReload }) => {
+const HaulTable: React.FC<HaulTableProps> = ({ hauls, trip }) => {
   const [editOpen, setEditOpen] = useState(false);
   const [editFishingLogOpen, setEditFishingLogOpen] = useState(false);
   const [currentRow, setCurrentRow] = useState<API.FishingLogInfo[]>([]);
@@ -19,53 +19,67 @@ const HaulTable: React.FC<HaulTableProps> = ({ hauls, trip, onReload }) => {
     useState<API.FishingLog | null>(null);
   const intl = useIntl();
   const { getApi } = useModel('getTrip');
-  console.log('HaulTable received hauls:', hauls);
 
   const fishing_logs_columns: ProColumns<API.FishingLog>[] = [
     {
-      title: <div style={{ textAlign: 'center' }}>STT</div>,
+      title: (
+        <div style={{ textAlign: 'center' }}>
+          {intl.formatMessage({ id: 'trip.haulTable.no' })}
+        </div>
+      ),
       dataIndex: 'fishing_log_id',
       align: 'center',
-      render: (_, __, index, action) => {
-        return `Mẻ ${hauls.length - index}`;
+      render: (_, __, index) => {
+        return `${intl.formatMessage({ id: 'trip.haulTable.haul' })} ${
+          hauls.length - index
+        }`;
       },
     },
     {
-      title: <div style={{ textAlign: 'center' }}>Trạng Thái</div>,
-      dataIndex: ['status'], // 👈 lấy từ status 1: đang
+      title: (
+        <div style={{ textAlign: 'center' }}>
+          {intl.formatMessage({ id: 'trip.haulTable.status' })}
+        </div>
+      ),
+      dataIndex: ['status'],
       align: 'center',
       valueEnum: {
         0: {
           text: intl.formatMessage({
-            id: 'pages.trips.status.fishing',
-            defaultMessage: 'Đang đánh bắt',
+            id: 'trip.haulTable.fishing',
           }),
           status: 'Processing',
         },
         1: {
           text: intl.formatMessage({
-            id: 'pages.trips.status.end_fishing',
-            defaultMessage: 'Đã hoàn thành',
+            id: 'trip.haulTable.endFishing',
           }),
           status: 'Success',
         },
         2: {
           text: intl.formatMessage({
-            id: 'pages.trips.status.cancel_fishing',
-            defaultMessage: 'Đã huỷ',
+            id: 'trip.haulTable.cancelFishing',
           }),
           status: 'default',
         },
       },
     },
     {
-      title: <div style={{ textAlign: 'center' }}>Thời tiết</div>,
-      dataIndex: ['weather_description'], // 👈 lấy từ weather
+      title: (
+        <div style={{ textAlign: 'center' }}>
+          {intl.formatMessage({ id: 'trip.haulTable.weather' })}
+        </div>
+      ),
+      dataIndex: ['weather_description'],
       align: 'center',
     },
     {
-      title: <div style={{ textAlign: 'center' }}>Thời điểm bắt đầu</div>,
-      dataIndex: ['start_at'], // birth_date là date of birth
+      title: (
+        <div style={{ textAlign: 'center' }}>
+          {intl.formatMessage({ id: 'trip.haulTable.startTime' })}
+        </div>
+      ),
+      dataIndex: ['start_at'],
       align: 'center',
       render: (start_at: any) => {
         if (!start_at) return '-';
@@ -82,12 +96,15 @@ const HaulTable: React.FC<HaulTableProps> = ({ hauls, trip, onReload }) => {
       },
     },
     {
-      title: <div style={{ textAlign: 'center' }}>Thời điểm kết thúc</div>,
-      dataIndex: ['end_at'], // birth_date là date of birth
+      title: (
+        <div style={{ textAlign: 'center' }}>
+          {intl.formatMessage({ id: 'trip.haulTable.endTime' })}
+        </div>
+      ),
+      dataIndex: ['end_at'],
       align: 'center',
       render: (end_at: any) => {
-        // console.log('End at value:', end_at);
-        if (end_at == '0001-01-01T00:00:00Z') return '-';
+        if (end_at === '0001-01-01T00:00:00Z') return '-';
         const date = new Date(end_at);
         return date.toLocaleString('vi-VN', {
           day: '2-digit',
@@ -101,7 +118,7 @@ const HaulTable: React.FC<HaulTableProps> = ({ hauls, trip, onReload }) => {
       },
     },
     {
-      title: 'Thao tác',
+      title: intl.formatMessage({ id: 'trip.haulTable.action' }),
       align: 'center',
       hideInSearch: true,
       render: (_, record) => {
@@ -118,7 +135,9 @@ const HaulTable: React.FC<HaulTableProps> = ({ hauls, trip, onReload }) => {
                   setCurrentRow(record.info!); // record là dòng hiện tại trong table
                   setEditOpen(true);
                 } else {
-                  message.warning('Không có dữ liệu cá trong mẻ lưới này');
+                  message.warning(
+                    intl.formatMessage({ id: 'trip.haulFishList.noData' }),
+                  );
                 }
               }}
             />
@@ -169,10 +188,14 @@ const HaulTable: React.FC<HaulTableProps> = ({ hauls, trip, onReload }) => {
         onOpenChange={setEditFishingLogOpen}
         onFinished={(success) => {
           if (success) {
-            message.success('Cập nhật mẻ lưới thành công');
+            message.success(
+              intl.formatMessage({ id: 'trip.haulTable.updateSuccess' }),
+            );
             getApi();
           } else {
-            message.error('Cập nhật mẻ lưới thất bại');
+            message.error(
+              intl.formatMessage({ id: 'trip.haulTable.updateError' }),
+            );
           }
         }}
       />