clear file not use
This commit is contained in:
@@ -20,7 +20,7 @@ import {
|
|||||||
View,
|
View,
|
||||||
} from "react-native";
|
} from "react-native";
|
||||||
import { z } from "zod";
|
import { z } from "zod";
|
||||||
import { InfoSection } from "./NetDetailModal/components";
|
import { InfoSection } from "./components/InfoSection";
|
||||||
import styles from "./style/CreateOrUpdateHaulModal.styles";
|
import styles from "./style/CreateOrUpdateHaulModal.styles";
|
||||||
|
|
||||||
interface CreateOrUpdateHaulModalProps {
|
interface CreateOrUpdateHaulModalProps {
|
||||||
|
|||||||
@@ -1,362 +0,0 @@
|
|||||||
import { IconSymbol } from "@/components/ui/icon-symbol";
|
|
||||||
import React, { useState } from "react";
|
|
||||||
import {
|
|
||||||
Alert,
|
|
||||||
Modal,
|
|
||||||
ScrollView,
|
|
||||||
Text,
|
|
||||||
TouchableOpacity,
|
|
||||||
View,
|
|
||||||
} from "react-native";
|
|
||||||
import styles from "../style/NetDetailModal.styles";
|
|
||||||
import { CatchSectionHeader } from "./components/CatchSectionHeader";
|
|
||||||
import { FishCardList } from "./components/FishCardList";
|
|
||||||
import { NotesSection } from "./components/NotesSection";
|
|
||||||
|
|
||||||
interface NetDetailModalProps {
|
|
||||||
visible: boolean;
|
|
||||||
onClose: () => void;
|
|
||||||
netData: Model.FishingLog | null;
|
|
||||||
stt?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------
|
|
||||||
// 🧵 Component Modal
|
|
||||||
// ---------------------------
|
|
||||||
const NetDetailModal: React.FC<NetDetailModalProps> = ({
|
|
||||||
visible,
|
|
||||||
onClose,
|
|
||||||
netData,
|
|
||||||
stt,
|
|
||||||
}) => {
|
|
||||||
const [isEditing, setIsEditing] = useState(false);
|
|
||||||
const [editableCatchList, setEditableCatchList] = useState<
|
|
||||||
Model.FishingLogInfo[]
|
|
||||||
>([]);
|
|
||||||
const [selectedFishIndex, setSelectedFishIndex] = useState<number | null>(
|
|
||||||
null
|
|
||||||
);
|
|
||||||
const [selectedUnitIndex, setSelectedUnitIndex] = useState<number | null>(
|
|
||||||
null
|
|
||||||
);
|
|
||||||
// const [selectedConditionIndex, setSelectedConditionIndex] = useState<
|
|
||||||
// number | null
|
|
||||||
// >(null);
|
|
||||||
// const [selectedGearIndex, setSelectedGearIndex] = useState<number | null>(
|
|
||||||
// null
|
|
||||||
// );
|
|
||||||
const [expandedFishIndices, setExpandedFishIndices] = useState<number[]>([]);
|
|
||||||
|
|
||||||
// Khởi tạo dữ liệu khi netData thay đổi
|
|
||||||
React.useEffect(() => {
|
|
||||||
if (netData?.info) {
|
|
||||||
setEditableCatchList(netData.info);
|
|
||||||
}
|
|
||||||
}, [netData]);
|
|
||||||
|
|
||||||
// Reset state khi modal đóng
|
|
||||||
React.useEffect(() => {
|
|
||||||
if (!visible) {
|
|
||||||
setExpandedFishIndices([]);
|
|
||||||
setSelectedFishIndex(null);
|
|
||||||
setSelectedUnitIndex(null);
|
|
||||||
// setSelectedConditionIndex(null);
|
|
||||||
// setSelectedGearIndex(null);
|
|
||||||
setIsEditing(false);
|
|
||||||
}
|
|
||||||
}, [visible]);
|
|
||||||
|
|
||||||
// if (!netData) return null;
|
|
||||||
|
|
||||||
const isCompleted = netData?.status === 2; // ví dụ: status=2 là hoàn thành
|
|
||||||
|
|
||||||
// Danh sách tên cá có sẵn
|
|
||||||
const fishNameOptions = [
|
|
||||||
"Cá chim trắng",
|
|
||||||
"Cá song đỏ",
|
|
||||||
"Cá hồng",
|
|
||||||
"Cá nục",
|
|
||||||
"Cá ngừ đại dương",
|
|
||||||
"Cá mú trắng",
|
|
||||||
"Cá hồng phớn",
|
|
||||||
"Cá hổ Napoleon",
|
|
||||||
"Cá nược",
|
|
||||||
"Cá đuối quạt",
|
|
||||||
];
|
|
||||||
|
|
||||||
// Danh sách đơn vị
|
|
||||||
const unitOptions = ["kg", "con", "tấn"];
|
|
||||||
|
|
||||||
// Danh sách tình trạng
|
|
||||||
// const conditionOptions = ["Còn sống", "Chết", "Bị thương"];
|
|
||||||
|
|
||||||
// Danh sách ngư cụ
|
|
||||||
// const gearOptions = [
|
|
||||||
// "Lưới kéo",
|
|
||||||
// "Lưới vây",
|
|
||||||
// "Lưới rê",
|
|
||||||
// "Lưới cào",
|
|
||||||
// "Lưới lồng",
|
|
||||||
// "Câu cần",
|
|
||||||
// "Câu dây",
|
|
||||||
// "Chài cá",
|
|
||||||
// "Lồng bẫy",
|
|
||||||
// "Đăng",
|
|
||||||
// ];
|
|
||||||
|
|
||||||
const handleEdit = () => {
|
|
||||||
setIsEditing(!isEditing);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSave = () => {
|
|
||||||
// Validate từng cá trong danh sách và thu thập tất cả lỗi
|
|
||||||
const allErrors: { index: number; errors: string[] }[] = [];
|
|
||||||
|
|
||||||
for (let i = 0; i < editableCatchList.length; i++) {
|
|
||||||
const fish = editableCatchList[i];
|
|
||||||
const errors: string[] = [];
|
|
||||||
|
|
||||||
if (!fish.fish_name || fish.fish_name.trim() === "") {
|
|
||||||
errors.push("- Tên loài cá");
|
|
||||||
}
|
|
||||||
if (!fish.catch_number || fish.catch_number <= 0) {
|
|
||||||
errors.push("- Số lượng bắt được");
|
|
||||||
}
|
|
||||||
if (!fish.catch_unit || fish.catch_unit.trim() === "") {
|
|
||||||
errors.push("- Đơn vị");
|
|
||||||
}
|
|
||||||
if (!fish.fish_size || fish.fish_size <= 0) {
|
|
||||||
errors.push("- Kích thước cá");
|
|
||||||
}
|
|
||||||
// if (!fish.fish_condition || fish.fish_condition.trim() === "") {
|
|
||||||
// errors.push("- Tình trạng cá");
|
|
||||||
// }
|
|
||||||
// if (!fish.gear_usage || fish.gear_usage.trim() === "") {
|
|
||||||
// errors.push("- Dụng cụ sử dụng");
|
|
||||||
// }
|
|
||||||
|
|
||||||
if (errors.length > 0) {
|
|
||||||
allErrors.push({ index: i, errors });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Nếu có lỗi, hiển thị tất cả
|
|
||||||
if (allErrors.length > 0) {
|
|
||||||
const errorMessage = allErrors
|
|
||||||
.map((item) => {
|
|
||||||
return `Cá số ${item.index + 1}:\n${item.errors.join("\n")}`;
|
|
||||||
})
|
|
||||||
.join("\n\n");
|
|
||||||
|
|
||||||
Alert.alert(
|
|
||||||
"Thông tin không đầy đủ",
|
|
||||||
errorMessage,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
text: "Tiếp tục chỉnh sửa",
|
|
||||||
onPress: () => {
|
|
||||||
// Mở rộng tất cả các card bị lỗi
|
|
||||||
setExpandedFishIndices((prev) => {
|
|
||||||
const errorIndices = allErrors.map((item) => item.index);
|
|
||||||
const newIndices = [...prev];
|
|
||||||
errorIndices.forEach((idx) => {
|
|
||||||
if (!newIndices.includes(idx)) {
|
|
||||||
newIndices.push(idx);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return newIndices;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: "Hủy",
|
|
||||||
onPress: () => {},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
{ cancelable: false }
|
|
||||||
);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Nếu validation pass, lưu dữ liệu
|
|
||||||
setIsEditing(false);
|
|
||||||
console.log("Saved catch list:", editableCatchList);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCancel = () => {
|
|
||||||
setIsEditing(false);
|
|
||||||
setEditableCatchList(netData?.info || []);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleToggleExpanded = (index: number) => {
|
|
||||||
setExpandedFishIndices((prev) =>
|
|
||||||
prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const updateCatchItem = (
|
|
||||||
index: number,
|
|
||||||
field: keyof Model.FishingLogInfo,
|
|
||||||
value: string | number
|
|
||||||
) => {
|
|
||||||
setEditableCatchList((prev) =>
|
|
||||||
prev.map((item, i) => {
|
|
||||||
if (i === index) {
|
|
||||||
const updatedItem = { ...item };
|
|
||||||
if (
|
|
||||||
field === "catch_number" ||
|
|
||||||
field === "fish_size" ||
|
|
||||||
field === "fish_rarity"
|
|
||||||
) {
|
|
||||||
updatedItem[field] = Number(value) || 0;
|
|
||||||
} else {
|
|
||||||
updatedItem[field] = value as never;
|
|
||||||
}
|
|
||||||
return updatedItem;
|
|
||||||
}
|
|
||||||
return item;
|
|
||||||
})
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleAddNewFish = () => {
|
|
||||||
const newFish: Model.FishingLogInfo = {
|
|
||||||
fish_species_id: 0,
|
|
||||||
fish_name: "",
|
|
||||||
catch_number: 0,
|
|
||||||
catch_unit: "kg",
|
|
||||||
fish_size: 0,
|
|
||||||
fish_rarity: 0,
|
|
||||||
fish_condition: "",
|
|
||||||
gear_usage: "",
|
|
||||||
};
|
|
||||||
setEditableCatchList((prev) => [...prev, newFish]);
|
|
||||||
// Tự động expand card mới
|
|
||||||
setExpandedFishIndices((prev) => [...prev, editableCatchList.length]);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeleteFish = (index: number) => {
|
|
||||||
Alert.alert(
|
|
||||||
"Xác nhận xóa",
|
|
||||||
`Bạn có chắc muốn xóa loài cá này?`,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
text: "Hủy",
|
|
||||||
style: "cancel",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: "Xóa",
|
|
||||||
style: "destructive",
|
|
||||||
onPress: () => {
|
|
||||||
setEditableCatchList((prev) => prev.filter((_, i) => i !== index));
|
|
||||||
// Cập nhật lại expandedFishIndices sau khi xóa
|
|
||||||
setExpandedFishIndices((prev) =>
|
|
||||||
prev
|
|
||||||
.filter((i) => i !== index)
|
|
||||||
.map((i) => (i > index ? i - 1 : i))
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
{ cancelable: true }
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Chỉ tính tổng số lượng cá có đơn vị là 'kg'
|
|
||||||
const totalCatch = editableCatchList.reduce(
|
|
||||||
(sum, item) =>
|
|
||||||
item.catch_unit === "kg" ? sum + (item.catch_number ?? 0) : sum,
|
|
||||||
0
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
visible={visible}
|
|
||||||
animationType="slide"
|
|
||||||
presentationStyle="pageSheet"
|
|
||||||
onRequestClose={onClose}
|
|
||||||
>
|
|
||||||
<View style={styles.container}>
|
|
||||||
{/* Header */}
|
|
||||||
<View style={styles.header}>
|
|
||||||
<Text style={styles.title}>Chi tiết mẻ lưới</Text>
|
|
||||||
<View style={styles.headerButtons}>
|
|
||||||
{isEditing ? (
|
|
||||||
<>
|
|
||||||
<TouchableOpacity
|
|
||||||
onPress={handleCancel}
|
|
||||||
style={styles.cancelButton}
|
|
||||||
>
|
|
||||||
<Text style={styles.cancelButtonText}>Hủy</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
<TouchableOpacity
|
|
||||||
onPress={handleSave}
|
|
||||||
style={styles.saveButton}
|
|
||||||
>
|
|
||||||
<Text style={styles.saveButtonText}>Lưu</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<TouchableOpacity onPress={handleEdit} style={styles.editButton}>
|
|
||||||
<View style={styles.editIconButton}>
|
|
||||||
<IconSymbol
|
|
||||||
name="pencil"
|
|
||||||
size={28}
|
|
||||||
color="#fff"
|
|
||||||
weight="heavy"
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
</TouchableOpacity>
|
|
||||||
)}
|
|
||||||
<TouchableOpacity onPress={onClose} style={styles.closeButton}>
|
|
||||||
<View style={styles.closeIconButton}>
|
|
||||||
<IconSymbol name="xmark" size={28} color="#fff" />
|
|
||||||
</View>
|
|
||||||
</TouchableOpacity>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
<ScrollView style={styles.content}>
|
|
||||||
{/* Thông tin chung */}
|
|
||||||
{/* <InfoSection
|
|
||||||
netData={netData ?? undefined}
|
|
||||||
isCompleted={isCompleted}
|
|
||||||
stt={stt}
|
|
||||||
/> */}
|
|
||||||
|
|
||||||
{/* Danh sách cá bắt được */}
|
|
||||||
<CatchSectionHeader totalCatch={totalCatch} />
|
|
||||||
|
|
||||||
{/* Fish cards */}
|
|
||||||
<FishCardList
|
|
||||||
catchList={editableCatchList}
|
|
||||||
isEditing={isEditing}
|
|
||||||
expandedFishIndex={expandedFishIndices}
|
|
||||||
selectedFishIndex={selectedFishIndex}
|
|
||||||
selectedUnitIndex={selectedUnitIndex}
|
|
||||||
// selectedConditionIndex={selectedConditionIndex}
|
|
||||||
// selectedGearIndex={selectedGearIndex}
|
|
||||||
fishNameOptions={fishNameOptions}
|
|
||||||
unitOptions={unitOptions}
|
|
||||||
// conditionOptions={conditionOptions}
|
|
||||||
// gearOptions={gearOptions}
|
|
||||||
onToggleExpanded={handleToggleExpanded}
|
|
||||||
onUpdateCatchItem={updateCatchItem}
|
|
||||||
setSelectedFishIndex={setSelectedFishIndex}
|
|
||||||
setSelectedUnitIndex={setSelectedUnitIndex}
|
|
||||||
// setSelectedConditionIndex={setSelectedConditionIndex}
|
|
||||||
// setSelectedGearIndex={setSelectedGearIndex}
|
|
||||||
onAddNewFish={handleAddNewFish}
|
|
||||||
onDeleteFish={handleDeleteFish}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Ghi chú */}
|
|
||||||
<NotesSection ghiChu={netData?.weather_description} />
|
|
||||||
</ScrollView>
|
|
||||||
</View>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default NetDetailModal;
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { Text, View } from "react-native";
|
|
||||||
import styles from "../../style/NetDetailModal.styles";
|
|
||||||
|
|
||||||
interface CatchSectionHeaderProps {
|
|
||||||
totalCatch: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const CatchSectionHeader: React.FC<CatchSectionHeaderProps> = ({
|
|
||||||
totalCatch,
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<View style={styles.sectionHeader}>
|
|
||||||
<Text style={styles.sectionTitle}>Danh sách cá bắt được</Text>
|
|
||||||
<Text style={styles.totalCatchText}>
|
|
||||||
Tổng: {totalCatch.toLocaleString()} kg
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,207 +0,0 @@
|
|||||||
import { useFishes } from "@/state/use-fish";
|
|
||||||
import React from "react";
|
|
||||||
import { Text, TextInput, View } from "react-native";
|
|
||||||
import styles from "../../style/NetDetailModal.styles";
|
|
||||||
import { FishSelectDropdown } from "./FishSelectDropdown";
|
|
||||||
|
|
||||||
interface FishCardFormProps {
|
|
||||||
fish: Model.FishingLogInfo;
|
|
||||||
index: number;
|
|
||||||
isEditing: boolean;
|
|
||||||
fishNameOptions: string[]; // Bỏ gọi API cá
|
|
||||||
unitOptions: string[]; // Bỏ render ở trong này
|
|
||||||
// conditionOptions: string[];
|
|
||||||
// gearOptions: string[];
|
|
||||||
selectedFishIndex: number | null;
|
|
||||||
selectedUnitIndex: number | null;
|
|
||||||
// selectedConditionIndex: number | null;
|
|
||||||
// selectedGearIndex: number | null;
|
|
||||||
setSelectedFishIndex: (index: number | null) => void;
|
|
||||||
setSelectedUnitIndex: (index: number | null) => void;
|
|
||||||
// setSelectedConditionIndex: (index: number | null) => void;
|
|
||||||
// setSelectedGearIndex: (index: number | null) => void;
|
|
||||||
onUpdateCatchItem: (
|
|
||||||
index: number,
|
|
||||||
field: keyof Model.FishingLogInfo,
|
|
||||||
value: string | number
|
|
||||||
) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const FishCardForm: React.FC<FishCardFormProps> = ({
|
|
||||||
fish,
|
|
||||||
index,
|
|
||||||
isEditing,
|
|
||||||
unitOptions,
|
|
||||||
// conditionOptions,
|
|
||||||
// gearOptions,
|
|
||||||
selectedFishIndex,
|
|
||||||
selectedUnitIndex,
|
|
||||||
// selectedConditionIndex,
|
|
||||||
// selectedGearIndex,
|
|
||||||
setSelectedFishIndex,
|
|
||||||
setSelectedUnitIndex,
|
|
||||||
// setSelectedConditionIndex,
|
|
||||||
// setSelectedGearIndex,
|
|
||||||
onUpdateCatchItem,
|
|
||||||
}) => {
|
|
||||||
const { fishSpecies } = useFishes();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{/* Tên cá - Select */}
|
|
||||||
<View
|
|
||||||
style={[styles.fieldGroup, { zIndex: 1000 - index }, { marginTop: 15 }]}
|
|
||||||
>
|
|
||||||
<Text style={styles.label}>Tên cá</Text>
|
|
||||||
{isEditing ? (
|
|
||||||
<FishSelectDropdown
|
|
||||||
options={fishSpecies || []}
|
|
||||||
selectedFishId={selectedFishIndex}
|
|
||||||
isOpen={selectedFishIndex === index}
|
|
||||||
onToggle={() =>
|
|
||||||
setSelectedFishIndex(selectedFishIndex === index ? null : index)
|
|
||||||
}
|
|
||||||
onSelect={(value: Model.FishSpeciesResponse) => {
|
|
||||||
onUpdateCatchItem(index, "fish_name", value.name);
|
|
||||||
setSelectedFishIndex(value.id);
|
|
||||||
console.log("Fish Selected: ", fish);
|
|
||||||
}}
|
|
||||||
zIndex={1000 - index}
|
|
||||||
styleOverride={styles.fishNameDropdown}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Text style={styles.infoValue}>{fish.fish_name}</Text>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* Số lượng & Đơn vị */}
|
|
||||||
<View style={styles.rowGroup}>
|
|
||||||
<View style={[styles.fieldGroup, { flex: 1, marginRight: 8 }]}>
|
|
||||||
<Text style={styles.label}>Số lượng</Text>
|
|
||||||
{isEditing ? (
|
|
||||||
<TextInput
|
|
||||||
style={styles.input}
|
|
||||||
value={String(fish.catch_number)}
|
|
||||||
onChangeText={(value) =>
|
|
||||||
onUpdateCatchItem(index, "catch_number", value)
|
|
||||||
}
|
|
||||||
keyboardType="numeric"
|
|
||||||
placeholder="0"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Text style={styles.infoValue}>{fish.catch_number}</Text>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
<View
|
|
||||||
style={[
|
|
||||||
styles.fieldGroup,
|
|
||||||
{ flex: 1, marginLeft: 8, zIndex: 900 - index },
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<Text style={styles.label}>Đơn vị</Text>
|
|
||||||
{/* {isEditing ? (
|
|
||||||
<FishSelectDropdown
|
|
||||||
options={unitOptions}
|
|
||||||
selectedValue={fish.catch_unit ?? ""}
|
|
||||||
isOpen={selectedUnitIndex === index}
|
|
||||||
onToggle={() =>
|
|
||||||
setSelectedUnitIndex(selectedUnitIndex === index ? null : index)
|
|
||||||
}
|
|
||||||
onSelect={(value: string) => {
|
|
||||||
onUpdateCatchItem(index, "catch_unit", value);
|
|
||||||
setSelectedUnitIndex(null);
|
|
||||||
}}
|
|
||||||
zIndex={900 - index}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Text style={styles.infoValue}>{fish.catch_unit}</Text>
|
|
||||||
)} */}
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* Kích thước & Độ hiếm */}
|
|
||||||
<View style={styles.rowGroup}>
|
|
||||||
<View style={[styles.fieldGroup, { flex: 1, marginRight: 8 }]}>
|
|
||||||
<Text style={styles.label}>Kích thước (cm)</Text>
|
|
||||||
{isEditing ? (
|
|
||||||
<TextInput
|
|
||||||
style={styles.input}
|
|
||||||
value={String(fish.fish_size)}
|
|
||||||
onChangeText={(value) =>
|
|
||||||
onUpdateCatchItem(index, "fish_size", value)
|
|
||||||
}
|
|
||||||
keyboardType="numeric"
|
|
||||||
placeholder="0"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Text style={styles.infoValue}>{fish.fish_size} cm</Text>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
<View style={[styles.fieldGroup, { flex: 1, marginLeft: 8 }]}>
|
|
||||||
<Text style={styles.label}>Độ hiếm</Text>
|
|
||||||
{isEditing ? (
|
|
||||||
<TextInput
|
|
||||||
style={styles.input}
|
|
||||||
value={String(fish.fish_rarity)}
|
|
||||||
onChangeText={(value) =>
|
|
||||||
onUpdateCatchItem(index, "fish_rarity", value)
|
|
||||||
}
|
|
||||||
keyboardType="numeric"
|
|
||||||
placeholder="1-5"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Text style={styles.infoValue}>{fish.fish_rarity}</Text>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* Tình trạng */}
|
|
||||||
{/* <View style={[styles.fieldGroup, { zIndex: 800 - index }]}>
|
|
||||||
<Text style={styles.label}>Tình trạng</Text>
|
|
||||||
{isEditing ? (
|
|
||||||
<FishSelectDropdown
|
|
||||||
options={conditionOptions}
|
|
||||||
selectedValue={fish.fish_condition}
|
|
||||||
isOpen={selectedConditionIndex === index}
|
|
||||||
onToggle={() =>
|
|
||||||
setSelectedConditionIndex(
|
|
||||||
selectedConditionIndex === index ? null : index
|
|
||||||
)
|
|
||||||
}
|
|
||||||
onSelect={(value: string) => {
|
|
||||||
onUpdateCatchItem(index, "fish_condition", value);
|
|
||||||
setSelectedConditionIndex(null);
|
|
||||||
}}
|
|
||||||
zIndex={800 - index}
|
|
||||||
styleOverride={styles.optionsStatusFishList}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Text style={styles.infoValue}>{fish.fish_condition}</Text>
|
|
||||||
)}
|
|
||||||
</View> */}
|
|
||||||
|
|
||||||
{/* Ngư cụ sử dụng */}
|
|
||||||
{/* <View style={[styles.fieldGroup, { zIndex: 700 - index }]}>
|
|
||||||
<Text style={styles.label}>Ngư cụ sử dụng</Text>
|
|
||||||
{isEditing ? (
|
|
||||||
<FishSelectDropdown
|
|
||||||
options={gearOptions}
|
|
||||||
selectedValue={fish.gear_usage}
|
|
||||||
isOpen={selectedGearIndex === index}
|
|
||||||
onToggle={() =>
|
|
||||||
setSelectedGearIndex(selectedGearIndex === index ? null : index)
|
|
||||||
}
|
|
||||||
onSelect={(value: string) => {
|
|
||||||
onUpdateCatchItem(index, "gear_usage", value);
|
|
||||||
setSelectedGearIndex(null);
|
|
||||||
}}
|
|
||||||
zIndex={700 - index}
|
|
||||||
styleOverride={styles.optionsStatusFishList}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Text style={styles.infoValue}>{fish.gear_usage || "Không có"}</Text>
|
|
||||||
)}
|
|
||||||
</View> */}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { Text, View } from "react-native";
|
|
||||||
import styles from "../../style/NetDetailModal.styles";
|
|
||||||
|
|
||||||
interface FishCardHeaderProps {
|
|
||||||
fish: Model.FishingLogInfo;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const FishCardHeader: React.FC<FishCardHeaderProps> = ({ fish }) => {
|
|
||||||
return (
|
|
||||||
<View style={styles.fishCardHeaderContent}>
|
|
||||||
<Text style={styles.fishCardTitle}>{fish.fish_name}:</Text>
|
|
||||||
<Text style={styles.fishCardSubtitle}>
|
|
||||||
{fish.catch_number} {fish.catch_unit}
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,168 +0,0 @@
|
|||||||
import { IconSymbol } from "@/components/ui/icon-symbol";
|
|
||||||
import React from "react";
|
|
||||||
import { Text, TouchableOpacity, View } from "react-native";
|
|
||||||
import styles from "../../style/NetDetailModal.styles";
|
|
||||||
import { FishCardForm } from "./FishCardForm";
|
|
||||||
import { FishCardHeader } from "./FishCardHeader";
|
|
||||||
|
|
||||||
interface FishCardListProps {
|
|
||||||
catchList: Model.FishingLogInfo[];
|
|
||||||
isEditing: boolean;
|
|
||||||
expandedFishIndex: number[];
|
|
||||||
selectedFishIndex: number | null;
|
|
||||||
selectedUnitIndex: number | null;
|
|
||||||
// selectedConditionIndex: number | null;
|
|
||||||
// selectedGearIndex: number | null;
|
|
||||||
fishNameOptions: string[];
|
|
||||||
unitOptions: string[];
|
|
||||||
// conditionOptions: string[];
|
|
||||||
// gearOptions: string[];
|
|
||||||
onToggleExpanded: (index: number) => void;
|
|
||||||
onUpdateCatchItem: (
|
|
||||||
index: number,
|
|
||||||
field: keyof Model.FishingLogInfo,
|
|
||||||
value: string | number
|
|
||||||
) => void;
|
|
||||||
setSelectedFishIndex: (index: number | null) => void;
|
|
||||||
setSelectedUnitIndex: (index: number | null) => void;
|
|
||||||
// setSelectedConditionIndex: (index: number | null) => void;
|
|
||||||
// setSelectedGearIndex: (index: number | null) => void;
|
|
||||||
onAddNewFish?: () => void;
|
|
||||||
onDeleteFish?: (index: number) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const FishCardList: React.FC<FishCardListProps> = ({
|
|
||||||
catchList,
|
|
||||||
isEditing,
|
|
||||||
expandedFishIndex,
|
|
||||||
selectedFishIndex,
|
|
||||||
selectedUnitIndex,
|
|
||||||
// selectedConditionIndex,
|
|
||||||
// selectedGearIndex,
|
|
||||||
fishNameOptions,
|
|
||||||
unitOptions,
|
|
||||||
// conditionOptions,
|
|
||||||
// gearOptions,
|
|
||||||
onToggleExpanded,
|
|
||||||
onUpdateCatchItem,
|
|
||||||
setSelectedFishIndex,
|
|
||||||
setSelectedUnitIndex,
|
|
||||||
// setSelectedConditionIndex,
|
|
||||||
// setSelectedGearIndex,
|
|
||||||
onAddNewFish,
|
|
||||||
onDeleteFish,
|
|
||||||
}) => {
|
|
||||||
// Chuyển về logic đơn giản, không animation
|
|
||||||
const handleToggleCard = (index: number) => {
|
|
||||||
onToggleExpanded(index);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{catchList.map((fish, index) => (
|
|
||||||
<View key={index} style={styles.fishCard}>
|
|
||||||
{/* Delete + Chevron buttons - always on top, right side, horizontal row */}
|
|
||||||
<View
|
|
||||||
style={{
|
|
||||||
position: "absolute",
|
|
||||||
top: 0,
|
|
||||||
right: 0,
|
|
||||||
zIndex: 9999,
|
|
||||||
flexDirection: "row",
|
|
||||||
alignItems: "center",
|
|
||||||
padding: 8,
|
|
||||||
gap: 8,
|
|
||||||
}}
|
|
||||||
pointerEvents="box-none"
|
|
||||||
>
|
|
||||||
{isEditing && (
|
|
||||||
<TouchableOpacity
|
|
||||||
onPress={() => onDeleteFish?.(index)}
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#FF3B30",
|
|
||||||
borderRadius: 8,
|
|
||||||
width: 40,
|
|
||||||
height: 40,
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
shadowColor: "#000",
|
|
||||||
shadowOpacity: 0.08,
|
|
||||||
shadowRadius: 2,
|
|
||||||
shadowOffset: { width: 0, height: 1 },
|
|
||||||
elevation: 2,
|
|
||||||
}}
|
|
||||||
hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
|
|
||||||
activeOpacity={0.7}
|
|
||||||
>
|
|
||||||
<IconSymbol name="trash" size={24} color="#fff" />
|
|
||||||
</TouchableOpacity>
|
|
||||||
)}
|
|
||||||
<TouchableOpacity
|
|
||||||
onPress={() => handleToggleCard(index)}
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#007AFF",
|
|
||||||
borderRadius: 8,
|
|
||||||
width: 40,
|
|
||||||
height: 40,
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
shadowColor: "#000",
|
|
||||||
shadowOpacity: 0.08,
|
|
||||||
shadowRadius: 2,
|
|
||||||
shadowOffset: { width: 0, height: 1 },
|
|
||||||
elevation: 2,
|
|
||||||
}}
|
|
||||||
hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
|
|
||||||
activeOpacity={0.7}
|
|
||||||
>
|
|
||||||
<IconSymbol
|
|
||||||
name={
|
|
||||||
expandedFishIndex.includes(index)
|
|
||||||
? "chevron.up"
|
|
||||||
: "chevron.down"
|
|
||||||
}
|
|
||||||
size={24}
|
|
||||||
color="#fff"
|
|
||||||
/>
|
|
||||||
</TouchableOpacity>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* Header - Only visible when collapsed */}
|
|
||||||
{!expandedFishIndex.includes(index) && <FishCardHeader fish={fish} />}
|
|
||||||
|
|
||||||
{/* Form - Only show when expanded */}
|
|
||||||
{expandedFishIndex.includes(index) && (
|
|
||||||
<FishCardForm
|
|
||||||
fish={fish}
|
|
||||||
index={index}
|
|
||||||
isEditing={isEditing}
|
|
||||||
fishNameOptions={fishNameOptions}
|
|
||||||
unitOptions={unitOptions}
|
|
||||||
// conditionOptions={conditionOptions}
|
|
||||||
// gearOptions={gearOptions}
|
|
||||||
selectedFishIndex={selectedFishIndex}
|
|
||||||
selectedUnitIndex={selectedUnitIndex}
|
|
||||||
// selectedConditionIndex={selectedConditionIndex}
|
|
||||||
// selectedGearIndex={selectedGearIndex}
|
|
||||||
setSelectedFishIndex={setSelectedFishIndex}
|
|
||||||
setSelectedUnitIndex={setSelectedUnitIndex}
|
|
||||||
// setSelectedConditionIndex={setSelectedConditionIndex}
|
|
||||||
// setSelectedGearIndex={setSelectedGearIndex}
|
|
||||||
onUpdateCatchItem={onUpdateCatchItem}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{/* Nút thêm loài cá mới - hiển thị khi đang chỉnh sửa */}
|
|
||||||
{isEditing && (
|
|
||||||
<TouchableOpacity onPress={onAddNewFish} style={styles.addFishButton}>
|
|
||||||
<View style={styles.addFishButtonContent}>
|
|
||||||
<IconSymbol name="plus" size={24} color="#fff" />
|
|
||||||
<Text style={styles.addFishButtonText}>Thêm loài cá</Text>
|
|
||||||
</View>
|
|
||||||
</TouchableOpacity>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,61 +0,0 @@
|
|||||||
import { IconSymbol } from "@/components/ui/icon-symbol";
|
|
||||||
import React from "react";
|
|
||||||
import { ScrollView, Text, TouchableOpacity, View } from "react-native";
|
|
||||||
import styles from "../../style/NetDetailModal.styles";
|
|
||||||
|
|
||||||
interface FishSelectDropdownProps {
|
|
||||||
options: Model.FishSpeciesResponse[];
|
|
||||||
selectedFishId: number | null;
|
|
||||||
isOpen: boolean;
|
|
||||||
onToggle: () => void;
|
|
||||||
onSelect: (value: Model.FishSpeciesResponse) => void;
|
|
||||||
zIndex: number;
|
|
||||||
styleOverride?: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const FishSelectDropdown: React.FC<FishSelectDropdownProps> = ({
|
|
||||||
options,
|
|
||||||
selectedFishId,
|
|
||||||
isOpen,
|
|
||||||
onToggle,
|
|
||||||
onSelect,
|
|
||||||
zIndex,
|
|
||||||
styleOverride,
|
|
||||||
}) => {
|
|
||||||
const dropdownStyle = styleOverride || styles.optionsList;
|
|
||||||
const findFishNameById = (id: number | null) => {
|
|
||||||
const fish = options.find((item) => item.id === id);
|
|
||||||
return fish?.name || "Chọn cá";
|
|
||||||
};
|
|
||||||
const [selectedFish, setSelectedFish] =
|
|
||||||
React.useState<Model.FishSpeciesResponse | null>(null);
|
|
||||||
return (
|
|
||||||
<View style={{ zIndex }}>
|
|
||||||
<TouchableOpacity style={styles.selectButton} onPress={onToggle}>
|
|
||||||
<Text style={styles.selectButtonText}>
|
|
||||||
{findFishNameById(selectedFishId)}
|
|
||||||
</Text>
|
|
||||||
<IconSymbol
|
|
||||||
name={isOpen ? "chevron.up" : "chevron.down"}
|
|
||||||
size={16}
|
|
||||||
color="#666"
|
|
||||||
/>
|
|
||||||
</TouchableOpacity>
|
|
||||||
{isOpen && (
|
|
||||||
<ScrollView style={dropdownStyle} nestedScrollEnabled={true}>
|
|
||||||
{options.map((option, optIndex) => (
|
|
||||||
<TouchableOpacity
|
|
||||||
key={option.id || optIndex}
|
|
||||||
style={styles.optionItem}
|
|
||||||
onPress={() => onSelect(option)}
|
|
||||||
>
|
|
||||||
<Text style={styles.optionText}>
|
|
||||||
{findFishNameById(option.id)}
|
|
||||||
</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
))}
|
|
||||||
</ScrollView>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { Text, View } from "react-native";
|
|
||||||
import styles from "../../style/NetDetailModal.styles";
|
|
||||||
|
|
||||||
interface NotesSectionProps {
|
|
||||||
ghiChu?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const NotesSection: React.FC<NotesSectionProps> = ({ ghiChu }) => {
|
|
||||||
if (!ghiChu) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<View style={styles.infoCard}>
|
|
||||||
<View style={styles.infoRow}>
|
|
||||||
<Text style={styles.infoLabel}>Ghi chú</Text>
|
|
||||||
<Text style={styles.infoValue}>{ghiChu}</Text>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
export { CatchSectionHeader } from "./CatchSectionHeader";
|
|
||||||
export { FishCardForm } from "./FishCardForm";
|
|
||||||
export { FishCardHeader } from "./FishCardHeader";
|
|
||||||
export { FishCardList } from "./FishCardList";
|
|
||||||
export { FishSelectDropdown } from "./FishSelectDropdown";
|
|
||||||
export { InfoSection } from "./InfoSection";
|
|
||||||
export { NotesSection } from "./NotesSection";
|
|
||||||
@@ -1,177 +0,0 @@
|
|||||||
import { StyleSheet } from "react-native";
|
|
||||||
|
|
||||||
export default StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
flex: 1,
|
|
||||||
backgroundColor: "#fff",
|
|
||||||
},
|
|
||||||
header: {
|
|
||||||
flexDirection: "row",
|
|
||||||
justifyContent: "space-between",
|
|
||||||
alignItems: "center",
|
|
||||||
paddingHorizontal: 16,
|
|
||||||
paddingTop: 16,
|
|
||||||
paddingBottom: 8,
|
|
||||||
backgroundColor: "#f8f9fa",
|
|
||||||
borderBottomWidth: 1,
|
|
||||||
borderBottomColor: "#e9ecef",
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
fontSize: 18,
|
|
||||||
fontWeight: "bold",
|
|
||||||
color: "#333",
|
|
||||||
},
|
|
||||||
closeButton: {
|
|
||||||
padding: 8,
|
|
||||||
},
|
|
||||||
closeButtonText: {
|
|
||||||
fontSize: 16,
|
|
||||||
color: "#007bff",
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
flex: 1,
|
|
||||||
padding: 16,
|
|
||||||
},
|
|
||||||
fieldGroup: {
|
|
||||||
marginBottom: 16,
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
fontSize: 14,
|
|
||||||
fontWeight: "600",
|
|
||||||
color: "#333",
|
|
||||||
marginBottom: 4,
|
|
||||||
},
|
|
||||||
input: {
|
|
||||||
borderWidth: 1,
|
|
||||||
borderColor: "#ccc",
|
|
||||||
borderRadius: 4,
|
|
||||||
padding: 8,
|
|
||||||
fontSize: 16,
|
|
||||||
backgroundColor: "#fff",
|
|
||||||
},
|
|
||||||
infoValue: {
|
|
||||||
fontSize: 16,
|
|
||||||
color: "#555",
|
|
||||||
paddingVertical: 8,
|
|
||||||
},
|
|
||||||
rowGroup: {
|
|
||||||
flexDirection: "row",
|
|
||||||
justifyContent: "space-between",
|
|
||||||
},
|
|
||||||
fishNameDropdown: {
|
|
||||||
// Custom styles if needed
|
|
||||||
},
|
|
||||||
optionsStatusFishList: {
|
|
||||||
// Custom styles if needed
|
|
||||||
},
|
|
||||||
optionsList: {
|
|
||||||
maxHeight: 150,
|
|
||||||
borderWidth: 1,
|
|
||||||
borderColor: "#ccc",
|
|
||||||
borderRadius: 4,
|
|
||||||
backgroundColor: "#fff",
|
|
||||||
position: "absolute",
|
|
||||||
top: 40,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
zIndex: 1000,
|
|
||||||
},
|
|
||||||
selectButton: {
|
|
||||||
borderWidth: 1,
|
|
||||||
borderColor: "#ccc",
|
|
||||||
borderRadius: 4,
|
|
||||||
padding: 8,
|
|
||||||
backgroundColor: "#fff",
|
|
||||||
flexDirection: "row",
|
|
||||||
justifyContent: "space-between",
|
|
||||||
alignItems: "center",
|
|
||||||
},
|
|
||||||
selectButtonText: {
|
|
||||||
fontSize: 16,
|
|
||||||
color: "#333",
|
|
||||||
},
|
|
||||||
optionItem: {
|
|
||||||
padding: 10,
|
|
||||||
borderBottomWidth: 1,
|
|
||||||
borderBottomColor: "#eee",
|
|
||||||
},
|
|
||||||
optionText: {
|
|
||||||
fontSize: 16,
|
|
||||||
color: "#333",
|
|
||||||
},
|
|
||||||
card: {
|
|
||||||
borderWidth: 1,
|
|
||||||
borderColor: "#ddd",
|
|
||||||
borderRadius: 8,
|
|
||||||
padding: 12,
|
|
||||||
marginBottom: 12,
|
|
||||||
backgroundColor: "#f9f9f9",
|
|
||||||
},
|
|
||||||
removeButton: {
|
|
||||||
backgroundColor: "#dc3545",
|
|
||||||
padding: 8,
|
|
||||||
borderRadius: 4,
|
|
||||||
alignSelf: "flex-end",
|
|
||||||
marginTop: 8,
|
|
||||||
},
|
|
||||||
removeButtonText: {
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: 14,
|
|
||||||
},
|
|
||||||
errorText: {
|
|
||||||
color: "#dc3545",
|
|
||||||
fontSize: 12,
|
|
||||||
marginTop: 4,
|
|
||||||
},
|
|
||||||
buttonGroup: {
|
|
||||||
flexDirection: "row",
|
|
||||||
justifyContent: "space-around",
|
|
||||||
marginTop: 16,
|
|
||||||
},
|
|
||||||
editButton: {
|
|
||||||
backgroundColor: "#007bff",
|
|
||||||
padding: 10,
|
|
||||||
borderRadius: 4,
|
|
||||||
},
|
|
||||||
editButtonText: {
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: 16,
|
|
||||||
},
|
|
||||||
addButton: {
|
|
||||||
backgroundColor: "#28a745",
|
|
||||||
padding: 10,
|
|
||||||
borderRadius: 4,
|
|
||||||
},
|
|
||||||
addButtonText: {
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: 16,
|
|
||||||
},
|
|
||||||
saveButton: {
|
|
||||||
backgroundColor: "#007bff",
|
|
||||||
padding: 10,
|
|
||||||
borderRadius: 4,
|
|
||||||
},
|
|
||||||
saveButtonText: {
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: 16,
|
|
||||||
},
|
|
||||||
cancelButton: {
|
|
||||||
backgroundColor: "#6c757d",
|
|
||||||
padding: 10,
|
|
||||||
borderRadius: 4,
|
|
||||||
},
|
|
||||||
cancelButtonText: {
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: 16,
|
|
||||||
},
|
|
||||||
addFishButton: {
|
|
||||||
backgroundColor: "#17a2b8",
|
|
||||||
padding: 10,
|
|
||||||
borderRadius: 4,
|
|
||||||
marginBottom: 16,
|
|
||||||
},
|
|
||||||
addFishButtonText: {
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: 16,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@@ -1,7 +1,6 @@
|
|||||||
import { useI18n } from "@/hooks/use-i18n";
|
import { useI18n } from "@/hooks/use-i18n";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { Text, View } from "react-native";
|
import { StyleSheet, Text, View } from "react-native";
|
||||||
import styles from "../../style/NetDetailModal.styles";
|
|
||||||
|
|
||||||
interface InfoSectionProps {
|
interface InfoSectionProps {
|
||||||
fishingLog?: Model.FishingLog;
|
fishingLog?: Model.FishingLog;
|
||||||
@@ -93,3 +92,54 @@ export const InfoSection: React.FC<InfoSectionProps> = ({
|
|||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
infoCard: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: "#ddd",
|
||||||
|
borderRadius: 8,
|
||||||
|
padding: 12,
|
||||||
|
marginBottom: 12,
|
||||||
|
backgroundColor: "#f9f9f9",
|
||||||
|
},
|
||||||
|
infoRow: {
|
||||||
|
flexDirection: "row",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: "center",
|
||||||
|
marginBottom: 8,
|
||||||
|
},
|
||||||
|
infoLabel: {
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: "600",
|
||||||
|
color: "#333",
|
||||||
|
},
|
||||||
|
infoValue: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: "#555",
|
||||||
|
paddingVertical: 8,
|
||||||
|
},
|
||||||
|
statusBadge: {
|
||||||
|
paddingVertical: 4,
|
||||||
|
paddingHorizontal: 12,
|
||||||
|
borderRadius: 12,
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
},
|
||||||
|
statusBadgeCompleted: {
|
||||||
|
backgroundColor: "#34C759",
|
||||||
|
},
|
||||||
|
statusBadgeInProgress: {
|
||||||
|
backgroundColor: "#FF9500",
|
||||||
|
},
|
||||||
|
statusBadgeText: {
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: "600",
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
statusBadgeTextCompleted: {
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
statusBadgeTextInProgress: {
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user