tuanta/sgw-owner-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cập nhật thông tin cảng trong modal add/edit trip, tối ưu lại UI modal add/edit trip

Browse Source
This commit is contained in:
MinhNN
2025-12-24 11:38:23 +07:00
parent 000a4ed856
commit 24847504b1
9 changed files with 491 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/(tabs)/diary.tsx
View File

@@ -14,7 +14,7 @@ import { useRouter } from "expo-router";
import FilterButton from "@/components/diary/FilterButton";
import TripCard from "@/components/diary/TripCard";
import FilterModal, { FilterValues } from "@/components/diary/FilterModal";
import AddTripModal from "@/components/diary/TripFormModal";
import TripFormModal from "@/components/diary/TripFormModal";
import { useThings } from "@/state/use-thing";
import { useTripsList } from "@/state/use-tripslist";
import dayjs from "dayjs";
@@ -26,7 +26,7 @@ export default function diary() {
const { colors } = useThemeContext();
const router = useRouter();
const [showFilterModal, setShowFilterModal] = useState(false);
const [showAddTripModal, setShowAddTripModal] = useState(false);
const [showTripFormModal, setShowTripFormModal] = useState(false);
const [editingTrip, setEditingTrip] = useState<Model.Trip | null>(null);
const [filters, setFilters] = useState<FilterValues>({
status: null,
@@ -195,7 +195,7 @@ export default function diary() {
pathname: "/trip-detail",
params: {
tripId: tripToView.id,
tripData: JSON.stringify(tripToView)
tripData: JSON.stringify(tripToView),
},
});
}
@@ -206,7 +206,7 @@ export default function diary() {
const tripToEdit = allTrips.find((trip) => trip.id === tripId);
if (tripToEdit) {
setEditingTrip(tripToEdit);
setShowAddTripModal(true);
setShowTripFormModal(true);
}
};
@@ -351,7 +351,7 @@ export default function diary() {
/>
<TouchableOpacity
style={[styles.addButton, themedStyles.addButton]}
onPress={() => setShowAddTripModal(true)}
onPress={() => setShowTripFormModal(true)}
activeOpacity={0.7}
>
<Ionicons name="add" size={20} color="#FFFFFF" />
@@ -391,10 +391,10 @@ export default function diary() {
/>
{/* Add/Edit Trip Modal */}
<AddTripModal
visible={showAddTripModal}
<TripFormModal
visible={showTripFormModal}
onClose={() => {
setShowAddTripModal(false);
setShowTripFormModal(false);
setEditingTrip(null);
}}
onSuccess={handleTripAddSuccess}

6
app/trip-detail.tsx
View File

@@ -157,7 +157,7 @@ export default function TripDetailPage() {
>
{tripCosts.length > 0 ? (
<View style={styles.sectionInnerContent}>
<MaterialCostList items={tripCosts} onChange={() => {}} disabled />
<MaterialCostList items={tripCosts} onChange={() => {}} disabled hideTitle />
</View>
) : (
<EmptySection icon="receipt-outline" message={t("diary.tripDetail.noCosts")} />
@@ -174,7 +174,7 @@ export default function TripDetailPage() {
>
{fishingGears.length > 0 ? (
<View style={styles.sectionInnerContent}>
<FishingGearList items={fishingGears} onChange={() => {}} disabled />
<FishingGearList items={fishingGears} onChange={() => {}} disabled hideTitle />
</View>
) : (
<EmptySection icon="build-outline" message={t("diary.tripDetail.noGears")} />
@@ -297,7 +297,7 @@ const styles = StyleSheet.create({
fontFamily: Platform.select({ ios: "System", android: "Roboto", default: "System" }),
},
sectionInnerContent: {
marginTop: -8,
marginTop: 5,
},
emptySection: {
alignItems: "center",

4
components/diary/TripFormModal/FishingGearList.tsx
View File

@@ -21,12 +21,14 @@ interface FishingGearListProps {
items: FishingGear[];
onChange: (items: FishingGear[]) => void;
disabled?: boolean;
hideTitle?: boolean;
}
export default function FishingGearList({
items,
onChange,
disabled = false,
hideTitle = false,
}: FishingGearListProps) {
const { t } = useI18n();
const { colors } = useThemeContext();
@@ -77,9 +79,11 @@ export default function FishingGearList({
return (
<View style={styles.container}>
{!hideTitle && (
<Text style={[styles.sectionTitle, themedStyles.sectionTitle]}>
{t("diary.fishingGearList")}
</Text>
)}
{/* Gear Items List */}
{items.map((gear, index) => (

57
components/diary/TripFormModal/FormSection.tsx Normal file
View File

@@ -0,0 +1,57 @@
import React from "react";
import { View, Text, StyleSheet, Platform } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useThemeContext } from "@/hooks/use-theme-context";
interface FormSectionProps {
title: string;
icon?: keyof typeof Ionicons.glyphMap;
children: React.ReactNode;
}
/**
* A styled section wrapper for grouping related form fields
*/
export default function FormSection({ title, icon, children }: FormSectionProps) {
const { colors } = useThemeContext();
return (
<View style={[styles.container, { borderColor: colors.separator }]}>
<View style={styles.header}>
{icon && (
<Ionicons name={icon} size={18} color={colors.primary} style={styles.icon} />
)}
<Text style={[styles.title, { color: colors.text }]}>{title}</Text>
</View>
<View style={styles.content}>{children}</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
marginBottom: 20,
borderBottomWidth: 1,
paddingBottom: 16,
},
header: {
flexDirection: "row",
alignItems: "center",
marginBottom: 16,
},
icon: {
marginRight: 8,
},
title: {
fontSize: 17,
fontWeight: "700",
fontFamily: Platform.select({
ios: "System",
android: "Roboto",
default: "System",
}),
},
content: {
gap: 0,
},
});

4
components/diary/TripFormModal/MaterialCostList.tsx
View File

@@ -26,6 +26,7 @@ interface MaterialCostListProps {
items: TripCost[];
onChange: (items: TripCost[]) => void;
disabled?: boolean;
hideTitle?: boolean;
}
// Predefined cost types
@@ -41,6 +42,7 @@ export default function MaterialCostList({
items,
onChange,
disabled = false,
hideTitle = false,
}: MaterialCostListProps) {
const { t } = useI18n();
const { colors } = useThemeContext();
@@ -133,9 +135,11 @@ export default function MaterialCostList({
return (
<View style={styles.container}>
{!hideTitle && (
<Text style={[styles.sectionTitle, themedStyles.sectionTitle]}>
{t("trip.costTable.title")}
</Text>
)}
{/* Cost Items List */}
{items.map((cost) => (

267
components/diary/TripFormModal/PortSelector.tsx
View File

@@ -1,14 +1,21 @@
import React from "react";
import React, { useState, useEffect, useMemo } from "react";
import {
View,
Text,
TouchableOpacity,
StyleSheet,
Platform,
Modal,
ScrollView,
TextInput,
ActivityIndicator,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useI18n } from "@/hooks/use-i18n";
import { useThemeContext } from "@/hooks/use-theme-context";
import { useGroup } from "@/state/use-group";
import { usePort } from "@/state/use-ports";
import { filterPortsByProvinceCode } from "@/utils/tripDataConverters";
interface PortSelectorProps {
departurePortId: number;
@@ -18,6 +25,8 @@ interface PortSelectorProps {
disabled?: boolean;
}
type PortType = "departure" | "arrival";
export default function PortSelector({
departurePortId,
arrivalPortId,
@@ -28,26 +37,70 @@ export default function PortSelector({
const { t } = useI18n();
const { colors } = useThemeContext();
const handleSelectDeparturePort = () => {
console.log("Select departure port pressed");
// TODO: Implement port selection modal/dropdown
// For now, just set a dummy ID
onDeparturePortChange(1);
// State from zustand stores
const { groups, getUserGroups, loading: groupsLoading } = useGroup();
const { ports, getPorts, loading: portsLoading } = usePort();
// Local state - which dropdown is open
const [activeDropdown, setActiveDropdown] = useState<PortType | null>(null);
const [searchText, setSearchText] = useState("");
// Fetch groups and ports if not available
useEffect(() => {
if (!groups) {
getUserGroups();
}
}, [groups, getUserGroups]);
useEffect(() => {
if (!ports) {
getPorts();
}
}, [ports, getPorts]);
// Filter ports by province codes from groups
const filteredPorts = useMemo(() => {
return filterPortsByProvinceCode(ports, groups);
}, [ports, groups]);
// Filter by search text
const searchFilteredPorts = useMemo(() => {
if (!searchText) return filteredPorts;
return filteredPorts.filter((port) =>
port.name?.toLowerCase().includes(searchText.toLowerCase())
);
}, [filteredPorts, searchText]);
const isLoading = groupsLoading || portsLoading;
const handleSelectPort = (portId: number) => {
if (activeDropdown === "departure") {
onDeparturePortChange(portId);
} else {
onArrivalPortChange(portId);
}
setActiveDropdown(null);
setSearchText("");
};
const handleSelectArrivalPort = () => {
console.log("Select arrival port pressed");
// TODO: Implement port selection modal/dropdown
// For now, just set a dummy ID
onArrivalPortChange(1);
const openDropdown = (type: PortType) => {
setActiveDropdown(type);
setSearchText("");
};
// Helper to display port name (in production, fetch from port list by ID)
const closeDropdown = () => {
setActiveDropdown(null);
setSearchText("");
};
// Get port name by ID
const getPortDisplayName = (portId: number): string => {
// TODO: Fetch actual port name by ID from port list
return portId ? `Cảng (ID: ${portId})` : t("diary.selectPort");
const port = filteredPorts.find((p) => p.id === portId);
return port?.name || t("diary.selectPort");
};
const currentSelectedId = activeDropdown === "departure" ? departurePortId : arrivalPortId;
const themedStyles = {
label: { color: colors.text },
portSelector: {
@@ -56,6 +109,15 @@ export default function PortSelector({
},
portText: { color: colors.text },
placeholder: { color: colors.textSecondary },
modalOverlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
modalContent: { backgroundColor: colors.card },
searchInput: {
backgroundColor: colors.backgroundSecondary,
color: colors.text,
borderColor: colors.border,
},
option: { borderBottomColor: colors.separator },
optionText: { color: colors.text },
};
return (
@@ -70,14 +132,18 @@ export default function PortSelector({
{t("diary.departurePort")}
</Text>
<TouchableOpacity
style={[styles.portSelector, themedStyles.portSelector]}
onPress={disabled ? undefined : handleSelectDeparturePort}
style={[styles.dropdown, themedStyles.portSelector]}
onPress={disabled ? undefined : () => openDropdown("departure")}
activeOpacity={disabled ? 1 : 0.7}
disabled={disabled}
>
{isLoading ? (
<ActivityIndicator size="small" color={colors.primary} />
) : (
<>
<Text
style={[
styles.portText,
styles.dropdownText,
themedStyles.portText,
!departurePortId && themedStyles.placeholder,
]}
@@ -86,11 +152,13 @@ export default function PortSelector({
</Text>
{!disabled && (
<Ionicons
name="ellipsis-horizontal"
size={20}
name="chevron-down"
size={16}
color={colors.textSecondary}
/>
)}
</>
)}
</TouchableOpacity>
</View>
@@ -100,14 +168,18 @@ export default function PortSelector({
{t("diary.arrivalPort")}
</Text>
<TouchableOpacity
style={[styles.portSelector, themedStyles.portSelector]}
onPress={disabled ? undefined : handleSelectArrivalPort}
style={[styles.dropdown, themedStyles.portSelector]}
onPress={disabled ? undefined : () => openDropdown("arrival")}
activeOpacity={disabled ? 1 : 0.7}
disabled={disabled}
>
{isLoading ? (
<ActivityIndicator size="small" color={colors.primary} />
) : (
<>
<Text
style={[
styles.portText,
styles.dropdownText,
themedStyles.portText,
!arrivalPortId && themedStyles.placeholder,
]}
@@ -116,14 +188,79 @@ export default function PortSelector({
</Text>
{!disabled && (
<Ionicons
name="ellipsis-horizontal"
size={20}
name="chevron-down"
size={16}
color={colors.textSecondary}
/>
)}
</>
)}
</TouchableOpacity>
</View>
</View>
{/* Port Dropdown Modal - Fade style like MaterialCostList */}
<Modal
visible={activeDropdown !== null}
transparent
animationType="fade"
onRequestClose={closeDropdown}
>
<TouchableOpacity
style={[styles.modalOverlay, themedStyles.modalOverlay]}
activeOpacity={1}
onPress={closeDropdown}
>
<View style={[styles.modalContent, themedStyles.modalContent]}>
{/* Search Input */}
<View style={styles.searchContainer}>
<Ionicons
name="search"
size={18}
color={colors.textSecondary}
style={styles.searchIcon}
/>
<TextInput
style={[styles.searchInput, themedStyles.searchInput]}
placeholder={t("diary.searchPort")}
placeholderTextColor={colors.textSecondary}
value={searchText}
onChangeText={setSearchText}
/>
</View>
{/* Port List */}
<ScrollView style={styles.optionsList}>
{isLoading ? (
<View style={styles.loadingContainer}>
<ActivityIndicator size="small" color={colors.primary} />
</View>
) : searchFilteredPorts.length === 0 ? (
<View style={styles.emptyContainer}>
<Text style={[styles.emptyText, { color: colors.textSecondary }]}>
{t("diary.noPortsFound")}
</Text>
</View>
) : (
searchFilteredPorts.map((port) => (
<TouchableOpacity
key={port.id}
style={[styles.option, themedStyles.option]}
onPress={() => handleSelectPort(port.id || 0)}
>
<Text style={[styles.optionText, themedStyles.optionText]}>
{port.name}
</Text>
{currentSelectedId === port.id && (
<Ionicons name="checkmark" size={20} color={colors.primary} />
)}
</TouchableOpacity>
))
)}
</ScrollView>
</View>
</TouchableOpacity>
</Modal>
</View>
);
}
@@ -152,22 +289,23 @@ const styles = StyleSheet.create({
}),
},
portContainer: {
flexDirection: "row",
flexDirection: "column",
gap: 12,
},
portSection: {
flex: 1,
},
portSelector: {
dropdown: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
borderWidth: 1,
borderRadius: 8,
paddingHorizontal: 12,
paddingVertical: 12,
paddingVertical: 10,
minHeight: 44,
},
portText: {
dropdownText: {
fontSize: 15,
flex: 1,
fontFamily: Platform.select({
@@ -176,4 +314,77 @@ const styles = StyleSheet.create({
default: "System",
}),
},
// Modal styles - same as MaterialCostList
modalOverlay: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
modalContent: {
borderRadius: 12,
width: "85%",
maxHeight: "60%",
overflow: "hidden",
shadowColor: "#000",
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.3,
shadowRadius: 8,
elevation: 8,
},
searchContainer: {
flexDirection: "row",
alignItems: "center",
paddingHorizontal: 12,
paddingVertical: 10,
borderBottomWidth: 1,
borderBottomColor: "#E5E5E7",
},
searchIcon: {
marginRight: 8,
},
searchInput: {
flex: 1,
fontSize: 15,
paddingVertical: 6,
fontFamily: Platform.select({
ios: "System",
android: "Roboto",
default: "System",
}),
},
optionsList: {
maxHeight: 300,
},
option: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingHorizontal: 20,
paddingVertical: 16,
borderBottomWidth: 1,
},
optionText: {
fontSize: 16,
fontFamily: Platform.select({
ios: "System",
android: "Roboto",
default: "System",
}),
},
loadingContainer: {
padding: 20,
alignItems: "center",
},
emptyContainer: {
padding: 20,
alignItems: "center",
},
emptyText: {
fontSize: 14,
fontFamily: Platform.select({
ios: "System",
android: "Roboto",
default: "System",
}),
},
});

82
components/diary/TripFormModal/index.tsx
View File

@@ -23,6 +23,7 @@ import PortSelector from "./PortSelector";
import BasicInfoInput from "./BasicInfoInput";
import ShipSelector from "./ShipSelector";
import AutoFillSection from "./AutoFillSection";
import FormSection from "./FormSection";
import { createTrip, updateTrip } from "@/controller/TripController";
import {
convertFishingGears,
@@ -80,15 +81,31 @@ export default function TripFormModal({
).current;
// Form state
const [selectedShipId, setSelectedShipId] = useState(DEFAULT_FORM_STATE.selectedShipId);
const [selectedShipId, setSelectedShipId] = useState(
DEFAULT_FORM_STATE.selectedShipId
);
const [tripName, setTripName] = useState(DEFAULT_FORM_STATE.tripName);
const [fishingGears, setFishingGears] = useState<FishingGear[]>(DEFAULT_FORM_STATE.fishingGears);
const [tripCosts, setTripCosts] = useState<TripCost[]>(DEFAULT_FORM_STATE.tripCosts);
const [startDate, setStartDate] = useState<Date | null>(DEFAULT_FORM_STATE.startDate);
const [endDate, setEndDate] = useState<Date | null>(DEFAULT_FORM_STATE.endDate);
const [departurePortId, setDeparturePortId] = useState(DEFAULT_FORM_STATE.departurePortId);
const [arrivalPortId, setArrivalPortId] = useState(DEFAULT_FORM_STATE.arrivalPortId);
const [fishingGroundCodes, setFishingGroundCodes] = useState(DEFAULT_FORM_STATE.fishingGroundCodes);
const [fishingGears, setFishingGears] = useState<FishingGear[]>(
DEFAULT_FORM_STATE.fishingGears
);
const [tripCosts, setTripCosts] = useState<TripCost[]>(
DEFAULT_FORM_STATE.tripCosts
);
const [startDate, setStartDate] = useState<Date | null>(
DEFAULT_FORM_STATE.startDate
);
const [endDate, setEndDate] = useState<Date | null>(
DEFAULT_FORM_STATE.endDate
);
const [departurePortId, setDeparturePortId] = useState(
DEFAULT_FORM_STATE.departurePortId
);
const [arrivalPortId, setArrivalPortId] = useState(
DEFAULT_FORM_STATE.arrivalPortId
);
const [fishingGroundCodes, setFishingGroundCodes] = useState(
DEFAULT_FORM_STATE.fishingGroundCodes
);
const [isSubmitting, setIsSubmitting] = useState(false);
// Reset form to default state
@@ -105,7 +122,8 @@ export default function TripFormModal({
}, []);
// Fill form with trip data
const fillFormWithTripData = useCallback((data: Model.Trip, prefix: string) => {
const fillFormWithTripData = useCallback(
(data: Model.Trip, prefix: string) => {
setSelectedShipId(data.vms_id || "");
setTripName(data.name || "");
setFishingGears(convertFishingGears(data.fishing_gears, prefix));
@@ -114,8 +132,12 @@ export default function TripFormModal({
if (data.arrival_time) setEndDate(new Date(data.arrival_time));
if (data.departure_port_id) setDeparturePortId(data.departure_port_id);
if (data.arrival_port_id) setArrivalPortId(data.arrival_port_id);
setFishingGroundCodes(convertFishingGroundCodes(data.fishing_ground_codes));
}, []);
setFishingGroundCodes(
convertFishingGroundCodes(data.fishing_ground_codes)
);
},
[]
);
// Handle animation when modal visibility changes
useEffect(() => {
@@ -185,9 +207,12 @@ export default function TripFormModal({
setSelectedShipId(selectedThingId);
setFishingGears(convertFishingGears(tripData.fishing_gears, "auto"));
setTripCosts(convertTripCosts(tripData.trip_cost, "auto"));
if (tripData.departure_port_id) setDeparturePortId(tripData.departure_port_id);
if (tripData.departure_port_id)
setDeparturePortId(tripData.departure_port_id);
if (tripData.arrival_port_id) setArrivalPortId(tripData.arrival_port_id);
setFishingGroundCodes(convertFishingGroundCodes(tripData.fishing_ground_codes));
setFishingGroundCodes(
convertFishingGroundCodes(tripData.fishing_ground_codes)
);
},
[]
);
@@ -323,10 +348,15 @@ export default function TripFormModal({
</View>
{/* Content */}
<ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
<ScrollView
style={styles.content}
showsVerticalScrollIndicator={false}
>
{/* Auto Fill Section - only show in add mode */}
{!isEditMode && <AutoFillSection onAutoFill={handleAutoFill} />}
{/* Section 1: Basic Information */}
<FormSection title={t("diary.formSection.basicInfo")} icon="boat-outline">
{/* Ship Selector - disabled in edit mode */}
<ShipSelector
selectedShipId={selectedShipId}
@@ -336,13 +366,10 @@ export default function TripFormModal({
{/* Trip Name */}
<TripNameInput value={tripName} onChange={setTripName} />
</FormSection>
{/* Fishing Gear List */}
<FishingGearList items={fishingGears} onChange={setFishingGears} />
{/* Trip Cost List */}
<MaterialCostList items={tripCosts} onChange={setTripCosts} />
{/* Section 2: Schedule & Location */}
<FormSection title={t("diary.formSection.schedule")} icon="calendar-outline">
{/* Trip Duration */}
<TripDurationPicker
startDate={startDate}
@@ -364,6 +391,17 @@ export default function TripFormModal({
fishingGroundCodes={fishingGroundCodes}
onChange={setFishingGroundCodes}
/>
</FormSection>
{/* Section 3: Equipment */}
<FormSection title={t("diary.formSection.equipment")} icon="construct-outline">
<FishingGearList items={fishingGears} onChange={setFishingGears} hideTitle />
</FormSection>
{/* Section 4: Costs */}
<FormSection title={t("diary.formSection.costs")} icon="wallet-outline">
<MaterialCostList items={tripCosts} onChange={setTripCosts} hideTitle />
</FormSection>
</ScrollView>
{/* Footer */}
@@ -373,7 +411,9 @@ export default function TripFormModal({
onPress={handleCancel}
activeOpacity={0.7}
>
<Text style={[styles.cancelButtonText, themedStyles.cancelButtonText]}>
<Text
style={[styles.cancelButtonText, themedStyles.cancelButtonText]}
>
{t("common.cancel")}
</Text>
</TouchableOpacity>

10
locales/vi.json
View File

@@ -150,13 +150,21 @@
"selectDate": "Chọn ngày",
"selectStartDate": "Chọn ngày bắt đầu",
"selectEndDate": "Chọn ngày kết thúc",
"portLabel": " Cả",
"portLabel": " Cảng",
"departurePort": "Cảng khởi hành",
"arrivalPort": "Cảng cập bến",
"selectPort": "Chọn cảng",
"searchPort": "Tìm kiếm cảng...",
"noPortsFound": "Không tìm thấy cảng phù hợp",
"fishingGroundCodes": "Ô ngư trường khai thác",
"fishingGroundCodesHint": "Nhập mã ô ngư trường (cách nhau bằng dấu phẩy)",
"fishingGroundCodesPlaceholder": "Ví dụ: 1,2,3",
"formSection": {
"basicInfo": "Thông tin cơ bản",
"schedule": "Lịch trình & Vị trí",
"equipment": "Ngư cụ",
"costs": "Chi phí chuyến đi"
},
"autoFill": {
"title": "Tự động điền dữ liệu",
"description": "Điền từ chuyến đi cuối cùng của tàu",

40
utils/tripDataConverters.ts
View File

@@ -52,3 +52,43 @@ export function parseFishingGroundCodes(codesString: string): number[] {
.map((code) => parseInt(code.trim()))
.filter((code) => !isNaN(code));
}
/**
* Extract province codes from groups
* @param groups - Model.GroupResponse containing groups with metadata.code
* @returns Array of province codes
*/
export function getProvinceCodesFromGroups(
groups: Model.GroupResponse | null | undefined
): string[] {
if (!groups?.groups) return [];
return groups.groups
.map((group) => group.metadata?.code)
.filter((code): code is string => !!code);
}
/**
* Filter ports by province codes extracted from groups
* @param ports - Model.PortResponse containing all ports
* @param groups - Model.GroupResponse to extract province_code from metadata.code
* @returns Filtered ports that match the province codes from groups
*/
export function filterPortsByProvinceCode(
ports: Model.PortResponse | null | undefined,
groups: Model.GroupResponse | null | undefined
): Model.Port[] {
if (!ports?.ports) return [];
if (!groups?.groups) return ports.ports; // Return all ports if no groups
// Extract province codes from groups
const provinceCodes = getProvinceCodesFromGroups(groups);
// If no province codes found, return all ports
if (provinceCodes.length === 0) return ports.ports;
// Filter ports by province codes
return ports.ports.filter(
(port) => port.province_code && provinceCodes.includes(port.province_code)
);
}