thêm tab "Xem chi tiết chuyến đi", "Xem chi tiết thành viên chuyến đi", tái sử dụng lại components modal tripForm

components/diary/TripFormModal/TripFormBody.tsx

@@ -0,0 +1,120 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import FishingGearList from "./FishingGearList";
+import MaterialCostList from "./MaterialCostList";
+import TripNameInput from "./TripNameInput";
+import TripDurationPicker from "./TripDurationPicker";
+import PortSelector from "./PortSelector";
+import BasicInfoInput from "./BasicInfoInput";
+import ShipSelector from "./ShipSelector";
+import AutoFillSection from "./AutoFillSection";
+import { FishingGear, TripCost } from "./index";
+
+interface TripFormBodyProps {
+  mode: "add" | "edit" | "view";
+  tripData?: Model.Trip;
+  // Form state
+  selectedShipId: string;
+  setSelectedShipId: (id: string) => void;
+  tripName: string;
+  setTripName: (name: string) => void;
+  fishingGears: FishingGear[];
+  setFishingGears: (gears: FishingGear[]) => void;
+  tripCosts: TripCost[];
+  setTripCosts: (costs: TripCost[]) => void;
+  startDate: Date | null;
+  setStartDate: (date: Date | null) => void;
+  endDate: Date | null;
+  setEndDate: (date: Date | null) => void;
+  departurePortId: number;
+  setDeparturePortId: (id: number) => void;
+  arrivalPortId: number;
+  setArrivalPortId: (id: number) => void;
+  fishingGroundCodes: string;
+  setFishingGroundCodes: (codes: string) => void;
+  // Callbacks
+  onAutoFill?: (tripData: Model.Trip, selectedThingId: string) => void;
+}
+
+export default function TripFormBody({
+  mode,
+  selectedShipId,
+  setSelectedShipId,
+  tripName,
+  setTripName,
+  fishingGears,
+  setFishingGears,
+  tripCosts,
+  setTripCosts,
+  startDate,
+  setStartDate,
+  endDate,
+  setEndDate,
+  departurePortId,
+  setDeparturePortId,
+  arrivalPortId,
+  setArrivalPortId,
+  fishingGroundCodes,
+  setFishingGroundCodes,
+  onAutoFill,
+}: TripFormBodyProps) {
+  const isEditMode = mode === "edit";
+  const isViewMode = mode === "view";
+  const isReadOnly = isViewMode;
+
+  return (
+    <View style={styles.container}>
+      {/* Auto Fill Section - only show in add mode */}
+      {!isEditMode && !isViewMode && onAutoFill && (
+        <AutoFillSection onAutoFill={onAutoFill} />
+      )}
+
+      {/* Ship Selector - disabled in edit and view mode */}
+      <ShipSelector
+        selectedShipId={selectedShipId}
+        onChange={setSelectedShipId}
+        disabled={isEditMode || isViewMode}
+      />
+
+      {/* Trip Name */}
+      <TripNameInput value={tripName} onChange={setTripName} disabled={isReadOnly} />
+
+      {/* Fishing Gear List */}
+      <FishingGearList items={fishingGears} onChange={setFishingGears} disabled={isReadOnly} />
+
+      {/* Trip Cost List */}
+      <MaterialCostList items={tripCosts} onChange={setTripCosts} disabled={isReadOnly} />
+
+      {/* Trip Duration */}
+      <TripDurationPicker
+        startDate={startDate}
+        endDate={endDate}
+        onStartDateChange={setStartDate}
+        onEndDateChange={setEndDate}
+        disabled={isReadOnly}
+      />
+
+      {/* Port Selector */}
+      <PortSelector
+        departurePortId={departurePortId}
+        arrivalPortId={arrivalPortId}
+        onDeparturePortChange={setDeparturePortId}
+        onArrivalPortChange={setArrivalPortId}
+        disabled={isReadOnly}
+      />
+
+      {/* Fishing Ground Codes */}
+      <BasicInfoInput
+        fishingGroundCodes={fishingGroundCodes}
+        onChange={setFishingGroundCodes}
+        disabled={isReadOnly}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});