854 lines
28 KiB
TypeScript
854 lines
28 KiB
TypeScript
import Select, { SelectOption } from "@/components/Select";
|
|
import { ThemedText } from "@/components/themed-text";
|
|
import { Colors } from "@/config";
|
|
import { ColorScheme, useTheme } from "@/hooks/use-theme-context";
|
|
import { usePort } from "@/state/use-ports";
|
|
import { useShipGroups } from "@/state/use-ship-groups";
|
|
import { useShipTypes } from "@/state/use-ship-types";
|
|
import { useThings } from "@/state/use-thing";
|
|
import DateTimePicker from "@react-native-community/datetimepicker";
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import { Controller, useForm } from "react-hook-form";
|
|
import {
|
|
KeyboardAvoidingView,
|
|
Modal,
|
|
Platform,
|
|
Pressable,
|
|
ScrollView,
|
|
StyleSheet,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
View,
|
|
} from "react-native";
|
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
|
|
interface CreateOrUpdateShipProps {
|
|
initialValue?: Model.ShipBodyRequest;
|
|
isOpen?: boolean;
|
|
type?: "create" | "update";
|
|
onSubmit?: (data: Model.ShipBodyRequest) => void;
|
|
onClose?: () => void;
|
|
}
|
|
|
|
const CreateOrUpdateShip = (props: CreateOrUpdateShipProps) => {
|
|
const { colors, colorScheme } = useTheme();
|
|
const styles = useMemo(
|
|
() => createStyles(colors, colorScheme),
|
|
[colors, colorScheme]
|
|
);
|
|
|
|
const { shipTypes, getShipTypes } = useShipTypes();
|
|
const { ports, getPorts } = usePort();
|
|
const { shipGroups, getShipGroups } = useShipGroups();
|
|
const { things, getThings } = useThings();
|
|
|
|
// State for date picker
|
|
const [showDatePicker, setShowDatePicker] = useState(false);
|
|
|
|
// Initialize form with react-hook-form
|
|
const {
|
|
control,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
setValue,
|
|
watch,
|
|
reset,
|
|
} = useForm<Model.ShipBodyRequest>({
|
|
defaultValues: props.initialValue || {
|
|
fishing_license_expiry_date: new Date(),
|
|
},
|
|
});
|
|
|
|
// Watch the date field for picker display
|
|
const dateValue = watch("fishing_license_expiry_date");
|
|
|
|
// Fetch data when modal opens
|
|
useEffect(() => {
|
|
if (props.isOpen) {
|
|
// Fetch ship types if not loaded
|
|
if (shipTypes === null || shipTypes.length === 0) {
|
|
getShipTypes();
|
|
}
|
|
|
|
// Fetch ports if not loaded
|
|
if (ports === null) {
|
|
getPorts();
|
|
}
|
|
|
|
// Fetch ship groups if not loaded
|
|
if (shipGroups === null) {
|
|
getShipGroups();
|
|
}
|
|
|
|
// Fetch things when modal opens
|
|
const payloadThings: Model.SearchThingBody = {
|
|
offset: 0,
|
|
limit: 200,
|
|
order: "name",
|
|
dir: "asc",
|
|
};
|
|
getThings(payloadThings);
|
|
|
|
// Reset form with initial values if provided
|
|
if (props.initialValue) {
|
|
reset(props.initialValue);
|
|
}
|
|
}
|
|
}, [props.isOpen, props.initialValue, reset]);
|
|
|
|
useEffect(() => {
|
|
if (props.type === "create") {
|
|
reset(props.initialValue);
|
|
}
|
|
}, [props.isOpen]);
|
|
|
|
// Prepare options for selects
|
|
const shipTypeOptions = useMemo<SelectOption[]>(() => {
|
|
return (shipTypes || []).map((type) => ({
|
|
label: type.name || "",
|
|
value: type.id || 0,
|
|
}));
|
|
}, [shipTypes]);
|
|
|
|
const portOptions = useMemo<SelectOption[]>(() => {
|
|
return (ports?.ports || []).map((port) => ({
|
|
label: port.name || "",
|
|
value: port.id || 0,
|
|
}));
|
|
}, [ports]);
|
|
|
|
const shipGroupOptions = useMemo<SelectOption[]>(() => {
|
|
return (shipGroups || []).map((group) => ({
|
|
label: group.name || "",
|
|
value: group.id || "",
|
|
}));
|
|
}, [shipGroups]);
|
|
|
|
const thingOptions = useMemo<SelectOption[]>(() => {
|
|
// Filter things that are not assigned to any ship
|
|
const unassignedThings = (things || []).filter(
|
|
(thing) => !thing.metadata?.ship_id
|
|
);
|
|
return unassignedThings.map((thing) => ({
|
|
label: thing.name || "",
|
|
value: thing.id || "",
|
|
}));
|
|
}, [things]);
|
|
|
|
// Handle date picker change
|
|
const handleDateChange = (_: any, selectedDate?: Date) => {
|
|
if (selectedDate) {
|
|
setValue("fishing_license_expiry_date", selectedDate);
|
|
}
|
|
// On Android, close picker after selection
|
|
// On iOS, keep it open until user confirms with the button
|
|
if (Platform.OS === "android") {
|
|
setShowDatePicker(false);
|
|
}
|
|
};
|
|
|
|
// Format date for display
|
|
const formatDateForDisplay = (date: Date | string | undefined) => {
|
|
if (!date) return "";
|
|
const d = typeof date === "string" ? new Date(date) : date;
|
|
return d.toLocaleDateString("vi-VN", {
|
|
day: "2-digit",
|
|
month: "2-digit",
|
|
year: "numeric",
|
|
});
|
|
};
|
|
|
|
// Handle form submission
|
|
const onSubmit = (data: Model.ShipBodyRequest) => {
|
|
// Ensure numeric fields are numbers
|
|
const payload: Model.ShipBodyRequest = {
|
|
...data,
|
|
ship_type: Number(data.ship_type),
|
|
home_port: Number(data.home_port),
|
|
ship_length: Number(data.ship_length),
|
|
ship_power: Number(data.ship_power),
|
|
fishing_license_expiry_date: data.fishing_license_expiry_date,
|
|
};
|
|
|
|
props.onSubmit?.(payload);
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
animationType="slide"
|
|
transparent={true}
|
|
visible={props.isOpen}
|
|
onRequestClose={props.onClose}
|
|
>
|
|
<SafeAreaView style={{ flex: 1 }} edges={["top", "left", "right"]}>
|
|
<View style={styles.container}>
|
|
<Pressable style={styles.backdrop} onPress={props.onClose} />
|
|
<KeyboardAvoidingView
|
|
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
|
style={styles.keyboardAvoidingView}
|
|
>
|
|
<View style={styles.modalContent}>
|
|
{/* Header */}
|
|
<View style={styles.header}>
|
|
<View style={styles.dragIndicator} />
|
|
<ThemedText style={styles.headerTitle}>
|
|
{props.type === "create" ? "Thêm tàu mới" : "Cập nhật tàu"}
|
|
</ThemedText>
|
|
<TouchableOpacity
|
|
onPress={props.onClose}
|
|
style={styles.closeButton}
|
|
>
|
|
<ThemedText style={styles.closeButtonText}>✕</ThemedText>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
{/* Form Content */}
|
|
<ScrollView
|
|
style={styles.scrollView}
|
|
contentContainerStyle={styles.scrollContent}
|
|
showsVerticalScrollIndicator={false}
|
|
keyboardShouldPersistTaps="handled"
|
|
>
|
|
{/* Registration Number - Only show in create mode */}
|
|
{props.type === "create" && (
|
|
<View style={styles.fieldGroup}>
|
|
<ThemedText style={styles.label}>Số đăng ký *</ThemedText>
|
|
<Controller
|
|
control={control}
|
|
name="reg_number"
|
|
rules={{ required: "Vui lòng nhập số đăng ký" }}
|
|
render={({ field: { onChange, onBlur, value } }) => (
|
|
<TextInput
|
|
style={[
|
|
styles.input,
|
|
{
|
|
borderColor: errors.reg_number
|
|
? "red"
|
|
: colors.border,
|
|
},
|
|
]}
|
|
placeholder="Nhập số đăng ký"
|
|
onBlur={onBlur}
|
|
onChangeText={(text) => onChange(text.trim())}
|
|
value={value}
|
|
placeholderTextColor={colors.textSecondary}
|
|
/>
|
|
)}
|
|
/>
|
|
{errors.reg_number && (
|
|
<ThemedText style={styles.errorText}>
|
|
{errors.reg_number.message}
|
|
</ThemedText>
|
|
)}
|
|
</View>
|
|
)}
|
|
|
|
{/* Ship Name */}
|
|
<View style={styles.fieldGroup}>
|
|
<ThemedText style={styles.label}>Tên tàu *</ThemedText>
|
|
<Controller
|
|
control={control}
|
|
name="name"
|
|
rules={{ required: "Vui lòng nhập tên tàu" }}
|
|
render={({ field: { onChange, onBlur, value } }) => (
|
|
<TextInput
|
|
style={[
|
|
styles.input,
|
|
{ borderColor: errors.name ? "red" : colors.border },
|
|
]}
|
|
placeholder="Nhập tên tàu"
|
|
onBlur={onBlur}
|
|
onChangeText={onChange}
|
|
value={value}
|
|
placeholderTextColor={colors.textSecondary}
|
|
/>
|
|
)}
|
|
/>
|
|
{errors.name && (
|
|
<ThemedText style={styles.errorText}>
|
|
{errors.name.message}
|
|
</ThemedText>
|
|
)}
|
|
</View>
|
|
|
|
{/* Ship Type */}
|
|
<View style={styles.fieldGroup}>
|
|
<ThemedText style={styles.label}>Loại tàu *</ThemedText>
|
|
<Controller
|
|
control={control}
|
|
name="ship_type"
|
|
rules={{ required: "Vui lòng chọn loại tàu" }}
|
|
render={({ field: { onChange, value } }) => (
|
|
<Select
|
|
value={value}
|
|
onChange={onChange}
|
|
options={shipTypeOptions}
|
|
placeholder="Chọn loại tàu"
|
|
style={[
|
|
styles.selectInput,
|
|
{
|
|
borderColor: errors.ship_type
|
|
? "red"
|
|
: colors.border,
|
|
},
|
|
]}
|
|
/>
|
|
)}
|
|
/>
|
|
{errors.ship_type && (
|
|
<ThemedText style={styles.errorText}>
|
|
{errors.ship_type.message}
|
|
</ThemedText>
|
|
)}
|
|
</View>
|
|
|
|
{/* Home Port */}
|
|
<View style={styles.fieldGroup}>
|
|
<ThemedText style={styles.label}>
|
|
Cảng đăng ký đỗ *
|
|
</ThemedText>
|
|
<Controller
|
|
control={control}
|
|
name="home_port"
|
|
rules={{ required: "Vui lòng chọn cảng đăng ký" }}
|
|
render={({ field: { onChange, value } }) => (
|
|
<Select
|
|
value={value}
|
|
onChange={onChange}
|
|
options={portOptions}
|
|
placeholder="Chọn cảng đăng ký"
|
|
style={[
|
|
styles.selectInput,
|
|
{
|
|
borderColor: errors.home_port
|
|
? "red"
|
|
: colors.border,
|
|
},
|
|
]}
|
|
/>
|
|
)}
|
|
/>
|
|
{errors.home_port && (
|
|
<ThemedText style={styles.errorText}>
|
|
{errors.home_port.message}
|
|
</ThemedText>
|
|
)}
|
|
</View>
|
|
|
|
{/* Fishing License Number */}
|
|
<View style={styles.fieldGroup}>
|
|
<ThemedText style={styles.label}>Số giấy phép *</ThemedText>
|
|
<Controller
|
|
control={control}
|
|
name="fishing_license_number"
|
|
rules={{ required: "Vui lòng nhập số giấy phép" }}
|
|
render={({ field: { onChange, onBlur, value } }) => (
|
|
<TextInput
|
|
style={[
|
|
styles.input,
|
|
{
|
|
borderColor: errors.fishing_license_number
|
|
? "red"
|
|
: colors.border,
|
|
},
|
|
]}
|
|
placeholder="Nhập số giấy phép"
|
|
onBlur={onBlur}
|
|
onChangeText={onChange}
|
|
value={value}
|
|
placeholderTextColor={colors.textSecondary}
|
|
/>
|
|
)}
|
|
/>
|
|
{errors.fishing_license_number && (
|
|
<ThemedText style={styles.errorText}>
|
|
{errors.fishing_license_number.message}
|
|
</ThemedText>
|
|
)}
|
|
</View>
|
|
|
|
{/* Fishing License Expiry Date */}
|
|
<View style={styles.fieldGroup}>
|
|
<ThemedText style={styles.label}>Ngày hết hạn *</ThemedText>
|
|
<Controller
|
|
control={control}
|
|
name="fishing_license_expiry_date"
|
|
rules={{
|
|
required: "Vui lòng chọn ngày hết hạn",
|
|
validate: (date) => {
|
|
if (!date) return "Vui lòng chọn ngày hết hạn";
|
|
const selectedDate = new Date(date);
|
|
const today = new Date();
|
|
today.setHours(0, 0, 0, 0);
|
|
if (selectedDate < today) {
|
|
return "Ngày hết hạn không thể là ngày trong quá khứ";
|
|
}
|
|
return true;
|
|
},
|
|
}}
|
|
render={({ field: { onChange, value } }) => (
|
|
<TouchableOpacity
|
|
onPress={() => setShowDatePicker(true)}
|
|
style={[
|
|
styles.input,
|
|
styles.dateInput,
|
|
{
|
|
borderColor: errors.fishing_license_expiry_date
|
|
? "red"
|
|
: colors.border,
|
|
},
|
|
]}
|
|
>
|
|
<ThemedText
|
|
style={{
|
|
color: value ? colors.text : colors.textSecondary,
|
|
}}
|
|
>
|
|
{formatDateForDisplay(value) || "Chọn ngày hết hạn"}
|
|
</ThemedText>
|
|
</TouchableOpacity>
|
|
)}
|
|
/>
|
|
{errors.fishing_license_expiry_date && (
|
|
<ThemedText style={styles.errorText}>
|
|
{errors.fishing_license_expiry_date.message}
|
|
</ThemedText>
|
|
)}
|
|
</View>
|
|
|
|
{/* Ship Length */}
|
|
<View style={styles.fieldGroup}>
|
|
<ThemedText style={styles.label}>Chiều dài (m) *</ThemedText>
|
|
<Controller
|
|
control={control}
|
|
name="ship_length"
|
|
rules={{
|
|
required: "Vui lòng nhập chiều dài",
|
|
pattern: {
|
|
value: /^\d*\.?\d+$/,
|
|
message: "Vui lòng nhập số hợp lệ",
|
|
},
|
|
validate: (value) => {
|
|
const num = Number(value);
|
|
if (isNaN(num) || num <= 0) {
|
|
return "Chiều dài phải lớn hơn 0";
|
|
}
|
|
return true;
|
|
},
|
|
}}
|
|
render={({ field: { onChange, onBlur, value } }) => (
|
|
<TextInput
|
|
style={[
|
|
styles.input,
|
|
{
|
|
borderColor: errors.ship_length
|
|
? "red"
|
|
: colors.border,
|
|
},
|
|
]}
|
|
placeholder="Nhập chiều dài tàu"
|
|
onBlur={onBlur}
|
|
onChangeText={onChange}
|
|
value={value?.toString()}
|
|
keyboardType="numeric"
|
|
placeholderTextColor={colors.textSecondary}
|
|
/>
|
|
)}
|
|
/>
|
|
{errors.ship_length && (
|
|
<ThemedText style={styles.errorText}>
|
|
{errors.ship_length.message}
|
|
</ThemedText>
|
|
)}
|
|
</View>
|
|
|
|
{/* Ship Power */}
|
|
<View style={styles.fieldGroup}>
|
|
<ThemedText style={styles.label}>
|
|
Công suất (mã lực) *
|
|
</ThemedText>
|
|
<Controller
|
|
control={control}
|
|
name="ship_power"
|
|
rules={{
|
|
required: "Vui lòng nhập công suất",
|
|
pattern: {
|
|
value: /^\d*\.?\d+$/,
|
|
message: "Vui lòng nhập số hợp lệ",
|
|
},
|
|
validate: (value) => {
|
|
const num = Number(value);
|
|
if (isNaN(num) || num <= 0) {
|
|
return "Công suất phải lớn hơn 0";
|
|
}
|
|
return true;
|
|
},
|
|
}}
|
|
render={({ field: { onChange, onBlur, value } }) => (
|
|
<TextInput
|
|
style={[
|
|
styles.input,
|
|
{
|
|
borderColor: errors.ship_power
|
|
? "red"
|
|
: colors.border,
|
|
},
|
|
]}
|
|
placeholder="Nhập công suất tàu"
|
|
onBlur={onBlur}
|
|
onChangeText={onChange}
|
|
value={value?.toString()}
|
|
keyboardType="numeric"
|
|
placeholderTextColor={colors.textSecondary}
|
|
/>
|
|
)}
|
|
/>
|
|
{errors.ship_power && (
|
|
<ThemedText style={styles.errorText}>
|
|
{errors.ship_power.message}
|
|
</ThemedText>
|
|
)}
|
|
</View>
|
|
|
|
{/* Ship Group - Only show in update mode */}
|
|
{props.type === "update" && (
|
|
<View style={styles.fieldGroup}>
|
|
<ThemedText style={styles.label}>Đội tàu</ThemedText>
|
|
<Controller
|
|
control={control}
|
|
name="ship_group_id"
|
|
render={({ field: { onChange, value } }) => (
|
|
<Select
|
|
value={value}
|
|
onChange={onChange}
|
|
options={shipGroupOptions}
|
|
placeholder="Chọn đội tàu"
|
|
style={styles.selectInput}
|
|
/>
|
|
)}
|
|
/>
|
|
</View>
|
|
)}
|
|
|
|
{/* Device/Thing - Only show in create mode */}
|
|
{props.type === "create" && (
|
|
<View style={styles.fieldGroup}>
|
|
<ThemedText style={styles.label}>
|
|
Thiết bị kết nối *
|
|
</ThemedText>
|
|
<Controller
|
|
control={control}
|
|
name="thing_id"
|
|
rules={{ required: "Vui lòng chọn thiết bị kết nối" }}
|
|
render={({ field: { onChange, value } }) => (
|
|
<Select
|
|
value={value}
|
|
onChange={onChange}
|
|
options={thingOptions}
|
|
placeholder="Chọn thiết bị kết nối"
|
|
style={[
|
|
styles.selectInput,
|
|
{
|
|
borderColor: errors.thing_id
|
|
? "red"
|
|
: colors.border,
|
|
},
|
|
]}
|
|
/>
|
|
)}
|
|
/>
|
|
{errors.thing_id && (
|
|
<ThemedText style={styles.errorText}>
|
|
{errors.thing_id.message}
|
|
</ThemedText>
|
|
)}
|
|
</View>
|
|
)}
|
|
</ScrollView>
|
|
|
|
{/* Action Buttons */}
|
|
<View style={styles.actionButtons}>
|
|
<TouchableOpacity
|
|
style={[styles.resetButton, { borderColor: colors.border }]}
|
|
onPress={() => {
|
|
reset(props.initialValue || {});
|
|
}}
|
|
>
|
|
<ThemedText
|
|
style={[styles.resetButtonText, { color: colors.text }]}
|
|
>
|
|
Nhập lại
|
|
</ThemedText>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.submitButton,
|
|
{ backgroundColor: colors.primary },
|
|
]}
|
|
onPress={handleSubmit(onSubmit)}
|
|
>
|
|
<ThemedText style={styles.submitButtonText}>
|
|
{props.type === "create" ? "Thêm tàu" : "Cập nhật"}
|
|
</ThemedText>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
</View>
|
|
</SafeAreaView>
|
|
|
|
{/* Date Picker Modal - Only show on Android as modal, iOS shows inline */}
|
|
{Platform.OS === "android" && showDatePicker && (
|
|
<DateTimePicker
|
|
value={
|
|
typeof dateValue === "string"
|
|
? new Date(dateValue)
|
|
: dateValue || new Date()
|
|
}
|
|
mode="date"
|
|
display="default"
|
|
onChange={handleDateChange}
|
|
minimumDate={new Date()}
|
|
/>
|
|
)}
|
|
{Platform.OS === "ios" && showDatePicker && (
|
|
<Modal
|
|
transparent={true}
|
|
animationType="fade"
|
|
visible={showDatePicker}
|
|
onRequestClose={() => setShowDatePicker(false)}
|
|
>
|
|
<SafeAreaView style={styles.datePickerModal}>
|
|
<View style={styles.datePickerContent}>
|
|
<View style={styles.datePickerHeader}>
|
|
<ThemedText style={styles.datePickerTitle}>
|
|
Chọn ngày hết hạn
|
|
</ThemedText>
|
|
<TouchableOpacity onPress={() => setShowDatePicker(false)}>
|
|
<ThemedText style={styles.datePickerClose}>✕</ThemedText>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<DateTimePicker
|
|
value={
|
|
typeof dateValue === "string"
|
|
? new Date(dateValue)
|
|
: dateValue || new Date()
|
|
}
|
|
mode="date"
|
|
display="spinner"
|
|
onChange={handleDateChange}
|
|
themeVariant={colorScheme}
|
|
textColor={colors.text}
|
|
minimumDate={new Date()}
|
|
style={styles.datePickerIOS}
|
|
/>
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.datePickerButton,
|
|
{ backgroundColor: colors.primary },
|
|
]}
|
|
onPress={() => setShowDatePicker(false)}
|
|
>
|
|
<ThemedText style={styles.datePickerButtonText}>
|
|
Xác nhận
|
|
</ThemedText>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</SafeAreaView>
|
|
</Modal>
|
|
)}
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
const createStyles = (colors: typeof Colors.light, scheme: ColorScheme) =>
|
|
StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
position: "relative",
|
|
},
|
|
keyboardAvoidingView: {
|
|
flex: 1,
|
|
justifyContent: "flex-end",
|
|
},
|
|
backdrop: {
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
backgroundColor: "rgba(0, 0, 0, 0.3)",
|
|
},
|
|
modalContent: {
|
|
height: "90%",
|
|
backgroundColor: colors.background,
|
|
borderTopLeftRadius: 24,
|
|
borderTopRightRadius: 24,
|
|
shadowColor: "#000",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: -4,
|
|
},
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 8,
|
|
elevation: 10,
|
|
},
|
|
header: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
paddingVertical: 16,
|
|
paddingHorizontal: 20,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: colors.border,
|
|
position: "relative",
|
|
},
|
|
dragIndicator: {
|
|
position: "absolute",
|
|
top: 8,
|
|
width: 40,
|
|
height: 4,
|
|
backgroundColor: colors.border,
|
|
borderRadius: 2,
|
|
},
|
|
headerTitle: {
|
|
fontSize: 18,
|
|
fontWeight: "700",
|
|
textAlign: "center",
|
|
color: colors.text,
|
|
},
|
|
closeButton: {
|
|
position: "absolute",
|
|
right: 16,
|
|
top: 16,
|
|
width: 32,
|
|
height: 32,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
borderRadius: 16,
|
|
},
|
|
closeButtonText: {
|
|
fontSize: 20,
|
|
fontWeight: "300",
|
|
color: colors.text,
|
|
},
|
|
scrollView: {
|
|
flex: 1,
|
|
padding: 20,
|
|
},
|
|
scrollContent: {
|
|
paddingBottom: Platform.OS === "ios" ? 120 : 80,
|
|
},
|
|
fieldGroup: {
|
|
marginBottom: 24,
|
|
},
|
|
label: {
|
|
fontSize: 15,
|
|
fontWeight: "600",
|
|
marginBottom: 8,
|
|
color: colors.text,
|
|
},
|
|
input: {
|
|
borderWidth: 1,
|
|
borderRadius: 12,
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 14,
|
|
fontSize: 15,
|
|
backgroundColor: colors.surface,
|
|
color: colors.text,
|
|
},
|
|
selectInput: {
|
|
borderWidth: 1,
|
|
borderRadius: 12,
|
|
backgroundColor: colors.surface,
|
|
},
|
|
dateInput: {
|
|
justifyContent: "center",
|
|
},
|
|
errorText: {
|
|
fontSize: 13,
|
|
color: "red",
|
|
marginTop: 4,
|
|
},
|
|
actionButtons: {
|
|
flexDirection: "row",
|
|
paddingHorizontal: 20,
|
|
paddingVertical: 16,
|
|
gap: 12,
|
|
borderTopWidth: 1,
|
|
borderTopColor: colors.border,
|
|
},
|
|
resetButton: {
|
|
flex: 1,
|
|
paddingVertical: 14,
|
|
borderRadius: 12,
|
|
borderWidth: 1,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
resetButtonText: {
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
},
|
|
submitButton: {
|
|
flex: 1,
|
|
paddingVertical: 14,
|
|
borderRadius: 12,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
submitButtonText: {
|
|
color: "#ffffff",
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
},
|
|
// Date Picker Modal Styles
|
|
datePickerModal: {
|
|
flex: 1,
|
|
justifyContent: "flex-end",
|
|
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
},
|
|
datePickerContent: {
|
|
backgroundColor: colors.background,
|
|
borderTopLeftRadius: 24,
|
|
borderTopRightRadius: 24,
|
|
paddingBottom: 20,
|
|
},
|
|
datePickerHeader: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
paddingHorizontal: 20,
|
|
paddingVertical: 16,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: colors.border,
|
|
},
|
|
datePickerTitle: {
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
color: colors.text,
|
|
},
|
|
datePickerClose: {
|
|
fontSize: 20,
|
|
color: colors.text,
|
|
},
|
|
datePickerIOS: {
|
|
height: 200,
|
|
marginTop: 20,
|
|
},
|
|
datePickerButton: {
|
|
marginHorizontal: 20,
|
|
paddingVertical: 14,
|
|
borderRadius: 12,
|
|
alignItems: "center",
|
|
marginTop: 20,
|
|
},
|
|
datePickerButtonText: {
|
|
color: "#ffffff",
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
},
|
|
});
|
|
|
|
export default CreateOrUpdateShip;
|