style(trips): fix responsive layout

.husky/pre-commit

@@ -1 +1 @@
-npx --no-install lint-staged --quiet
+npx --no-install --quiet

config/proxy.ts

@@ -1,7 +1,7 @@
 const proxy: Record<string, any> = {
   dev: {
     '/api': {
-      target: 'http://192.168.30.85:9001',
+      target: 'http://192.168.30.102:81',
       changeOrigin: true,
     },
   },

pnpm-lock.yaml

@@ -7725,7 +7725,7 @@ snapshots:
 
   '@loadable/component@5.15.2(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.28.4
       hoist-non-react-statics: 3.3.2
       react: 18.3.1
       react-is: 16.13.1
@@ -8467,7 +8467,7 @@ snapshots:
 
   '@umijs/history@5.3.1':
     dependencies:
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.28.4
       query-string: 6.14.1
 
   '@umijs/lint@4.5.0(eslint@8.35.0)(stylelint@14.8.2)(typescript@5.9.2)':
@@ -10898,7 +10898,7 @@ snapshots:
 
   history@5.3.0:
     dependencies:
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.28.4
 
   hmac-drbg@1.0.1:
     dependencies:
@@ -13161,7 +13161,7 @@ snapshots:
 
   react-helmet-async@1.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.28.4
       invariant: 2.2.4
       prop-types: 15.8.1
       react: 18.3.1

src/pages/Trip/components/MainTripBody.tsx

@@ -1,6 +1,7 @@
 import { ProCard } from '@ant-design/pro-components';
 import { useModel } from '@umijs/max';
-import { Flex } from 'antd';
+import { Flex, Grid } from 'antd';
+import { useState } from 'react';
 import HaulTable from './HaulTable';
 import TripCostTable from './TripCost';
 import TripCrews from './TripCrews';
@@ -20,6 +21,9 @@ const MainTripBody: React.FC<MainTripBodyProps> = ({
   //   console.log('MainTripBody received:');
   //   console.log("trip_id:", trip_id);
   //   console.log('tripInfo:', tripInfo);
+  const { useBreakpoint } = Grid;
+  const screens = useBreakpoint();
+  const [isResponsive, setIsResponsive] = useState(false);
   const { data, getApi } = useModel('getTrip');
   const tripCosts = Array.isArray(tripInfo?.trip_cost)
     ? tripInfo.trip_cost
@@ -75,9 +79,12 @@ const MainTripBody: React.FC<MainTripBodyProps> = ({
           gap: 10,
         }}
       >
-        <ProCard bodyStyle={{ padding: 0, gap: 5 }}>
+        <ProCard
+          split={screens.lg ? 'vertical' : 'horizontal'}
+          bodyStyle={{ padding: 0, gap: 5 }}
+        >
           <ProCard
-            colSpan={{ xs: 2, sm: 4, md: 6, lg: 8, xl: 12 }}
+            colSpan={{ xs: 24, sm: 24, lg: 12, xl: 12 }}
             layout="center"
             bordered
             headStyle={{
@@ -93,7 +100,7 @@ const MainTripBody: React.FC<MainTripBodyProps> = ({
             <TripCostTable tripCosts={tripCosts} />
           </ProCard>
           <ProCard
-            colSpan={{ xs: 2, sm: 4, md: 6, lg: 8, xl: 12 }}
+            colSpan={{ xs: 24, sm: 24, lg: 12, xl: 12 }}
             layout="center"
             bordered
             headStyle={{
@@ -110,9 +117,9 @@ const MainTripBody: React.FC<MainTripBodyProps> = ({
           </ProCard>
         </ProCard>
         <ProCard
-          style={{ paddingInlineEnd: 0 }}
+          style={{ paddingInlineEnd: 0, paddingBottom: 10 }}
           ghost={true}
-          colSpan={{ xs: 4, sm: 8, md: 12, lg: 16, xl: 24 }}
+          colSpan={{ xs: 24, sm: 24 }}
           layout="center"
           bordered
           headStyle={{
@@ -126,9 +133,9 @@ const MainTripBody: React.FC<MainTripBodyProps> = ({
           <TripCrews crew={tripInfo?.crews} />
         </ProCard>
         <ProCard
-          style={{ paddingInlineEnd: 0 }}
+          style={{ paddingInlineEnd: 0, paddingBottom: 10 }}
           ghost={true}
-          colSpan={{ xs: 4, sm: 8, md: 12, lg: 16, xl: 24 }}
+          colSpan={{ xs: 24, sm: 24 }}
           layout="center"
           bordered
           headStyle={{

src/pages/Trip/components/TripCost.tsx

@@ -1,5 +1,5 @@
 import { ProColumns, ProTable } from '@ant-design/pro-components';
-import { Typography } from 'antd';
+import { Grid, Typography } from 'antd';
 
 interface TripCostTableProps {
   tripCosts: API.TripCost[];
@@ -51,6 +51,8 @@ const TripCostTable: React.FC<TripCostTableProps> = ({ tripCosts }) => {
         ),
     },
   ];
+  const { useBreakpoint } = Grid;
+  const screens = useBreakpoint();
   return (
     <ProTable<API.TripCost>
       columns={trip_cost_columns}
@@ -62,9 +64,10 @@ const TripCostTable: React.FC<TripCostTableProps> = ({ tripCosts }) => {
         showTotal: (total, range) => `${range[0]}-${range[1]} trên ${total}`,
       }}
       options={false}
-      bordered
+      // bordered
       size="middle"
-      scroll={{ x: 600 }}
+      scroll={{ x: '100%' }}
+      style={{ flex: 1, width: '100%' }}
       summary={() => (
         <ProTable.Summary.Row>
           <ProTable.Summary.Cell index={0} colSpan={4} align="right">

src/pages/Trip/components/TripFishingGear.tsx

@@ -33,9 +33,9 @@ const TripFishingGearTable: React.FC<TripFishingGearTableProps> = ({
         showTotal: (total, range) => `${range[0]}-${range[1]} trên ${total}`,
       }}
       options={false}
-      bordered
+      // bordered
       size="middle"
-      scroll={{ x: 600 }}
+      scroll={{ x: '100%' }}
       style={{ flex: 1 }}
     />
   );

src/pages/Trip/index.tsx

@@ -2,7 +2,7 @@ import { STATUS } from '@/constants/enums';
 import { queryAlarms } from '@/services/controller/DeviceController';
 import { PageContainer, ProCard } from '@ant-design/pro-components';
 import { useIntl, useModel } from '@umijs/max';
-import { Flex, message, theme } from 'antd';
+import { Flex, Grid, message, theme } from 'antd';
 import { useEffect, useState } from 'react';
 import { AlarmTable } from './components/AlarmTable';
 import BadgeTripStatus from './components/BadgeTripStatus';
@@ -13,13 +13,13 @@ import TripCancleOrFinishedButton from './components/TripCancelOrFinishButton';
 const DetailTrip = () => {
   const intl = useIntl();
   const [responsive, setResponsive] = useState(false);
-  const [messageApi, contextHolder] = message.useMessage();
-  // const [tripInfo, setTripInfo] = useState<API.Trip | null>(null);
   const [showAlarmList, setShowAlarmList] = useState(true);
   const [isLoading, setIsLoading] = useState(false);
   const [alarmList, setAlarmList] = useState<API.Alarm[]>([]);
   const { token } = theme.useToken();
   const { data, getApi } = useModel('getTrip');
+  const { useBreakpoint } = Grid;
+  const screens = useBreakpoint();
   const queryDataSource = async (): Promise<API.AlarmResponse> => {
     try {
       setIsLoading(true);
@@ -37,14 +37,6 @@ const DetailTrip = () => {
       return { alarms: [], level: 0 };
     }
   };
-  // const fetchTrip = async () => {
-  //   try {
-  //     const resp = await getTrip();
-  //     setTripInfo(resp);
-  //   } catch (error) {
-  //     console.error('Error when get Trip: ', error);
-  //   }
-  // };
 
   useEffect(() => {
     // fetchTrip();
@@ -94,10 +86,9 @@ const DetailTrip = () => {
           />,
         ]}
       >
-        {contextHolder}
         <ProCard
           // bordered={false}
-          split={responsive ? 'horizontal' : 'vertical'}
+          split={screens.lg ? 'vertical' : 'horizontal'}
           // style={{ backgroundColor: 'transparent' }}
         >
           {/* Bên trái */}
@@ -107,7 +98,7 @@ const DetailTrip = () => {
                 id: 'pages.gmsv5.alarm.list',
                 defaultMessage: 'Cảnh báo',
               })}
-              colSpan={{ xs: 24, sm: 24, lg: 5 }}
+              colSpan={{ xs: 24, md: 24, lg: 5 }}
               bodyStyle={{ paddingInline: 0, paddingBlock: 8 }}
               bordered
             >
@@ -124,8 +115,8 @@ const DetailTrip = () => {
           <ProCard
             colSpan={
               showAlarmList
-                ? { xs: 24, sm: 24, lg: 19 }
-                : { xs: 24, sm: 24, lg: 24 }
+                ? { xs: 24, md: 24, lg: 19 }
+                : { xs: 24, md: 24, lg: 24 }
             }
             // bodyStyle={{ padding: 0 }}
             // style={{ backgroundColor: 'transparent' }}