feat(core): sgw-device-ui

2025-09-26 18:22:04 +07:00
parent 466e931537
commit 2707b92f7e
88 changed files with 19104 additions and 0 deletions
--- a/src/pages/Trip/components/MainTripBody.tsx
+++ b/src/pages/Trip/components/MainTripBody.tsx
@@ -0,0 +1,158 @@
+import { ProCard } from '@ant-design/pro-components';
+import { useModel } from '@umijs/max';
+import { Flex } from 'antd';
+import HaulTable from './HaulTable';
+import TripCostTable from './TripCost';
+import TripCrews from './TripCrews';
+import TripFishingGearTable from './TripFishingGear';
+// Props cho component
+interface MainTripBodyProps {
+  trip_id?: string;
+  tripInfo: API.Trip | null;
+  onReload?: (isTrue: boolean) => void;
+}
+
+const MainTripBody: React.FC<MainTripBodyProps> = ({
+  trip_id,
+  tripInfo,
+  onReload,
+}) => {
+  //   console.log('MainTripBody received:');
+  //   console.log("trip_id:", trip_id);
+  //   console.log('tripInfo:', tripInfo);
+  const { data, getApi } = useModel('getTrip');
+  const tripCosts = Array.isArray(tripInfo?.trip_cost)
+    ? tripInfo.trip_cost
+    : [];
+  const fishingGears = Array.isArray(tripInfo?.fishing_gears)
+    ? tripInfo.fishing_gears
+    : [];
+
+  const fishing_logs_columns = [
+    {
+      title: <div style={{ textAlign: 'center' }}>Tên</div>,
+      dataIndex: 'name',
+      valueType: 'select',
+      align: 'center',
+    },
+    {
+      title: <div style={{ textAlign: 'center' }}>Số lượng</div>,
+      dataIndex: 'number',
+      align: 'center',
+    },
+  ];
+
+  const tranship_columns = [
+    {
+      title: <div style={{ textAlign: 'center' }}>Tên</div>,
+      dataIndex: 'name',
+      valueType: 'select',
+      align: 'center',
+    },
+    {
+      title: <div style={{ textAlign: 'center' }}>Chức vụ</div>,
+      dataIndex: 'role',
+      align: 'center',
+    },
+  ];
+
+  return (
+    <Flex gap={10}>
+      <ProCard
+        ghost
+        gutter={{
+          xs: 8,
+          sm: 8,
+          md: 8,
+          lg: 8,
+          xl: 8,
+          xxl: 8,
+        }}
+        direction="column"
+        bodyStyle={{
+          padding: 0,
+          paddingInline: 0,
+          gap: 10,
+        }}
+      >
+        <ProCard bodyStyle={{ padding: 0, gap: 5 }}>
+          <ProCard
+            colSpan={{ xs: 2, sm: 4, md: 6, lg: 8, xl: 12 }}
+            layout="center"
+            bordered
+            headStyle={{
+              textAlign: 'center',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              borderBottom: '1px solid #f0f0f0',
+            }}
+            title="Chi phí chuyến đi"
+            style={{ minHeight: 300 }}
+          >
+            <TripCostTable tripCosts={tripCosts} />
+          </ProCard>
+          <ProCard
+            colSpan={{ xs: 2, sm: 4, md: 6, lg: 8, xl: 12 }}
+            layout="center"
+            bordered
+            headStyle={{
+              textAlign: 'center',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              borderBottom: '1px solid #f0f0f0',
+            }}
+            title="Danh sách ngư cụ"
+            style={{ minHeight: 300 }}
+          >
+            <TripFishingGearTable fishingGears={fishingGears} />
+          </ProCard>
+        </ProCard>
+        <ProCard
+          style={{ paddingInlineEnd: 0 }}
+          ghost={true}
+          colSpan={{ xs: 4, sm: 8, md: 12, lg: 16, xl: 24 }}
+          layout="center"
+          bordered
+          headStyle={{
+            textAlign: 'center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+          title="Danh sách thuyền viên"
+        >
+          <TripCrews crew={tripInfo?.crews} />
+        </ProCard>
+        <ProCard
+          style={{ paddingInlineEnd: 0 }}
+          ghost={true}
+          colSpan={{ xs: 4, sm: 8, md: 12, lg: 16, xl: 24 }}
+          layout="center"
+          bordered
+          headStyle={{
+            textAlign: 'center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+          title="Danh sách mẻ lưới"
+        >
+          <HaulTable
+            trip={tripInfo!}
+            hauls={tripInfo?.fishing_logs || []}
+            onReload={(isTrue) => {
+              if (isTrue) {
+                // onReload?.(true);
+                getApi();
+              }
+            }}
+          />
+        </ProCard>
+      </ProCard>
+    </Flex>
+  );
+};
+
+export default MainTripBody;